바닥코딩

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서도 상태관리, 렌더링 직후 작업을 설정하는 기존에 되지 않았던 기능들을 지원하게 됐습니다. useState 가장 기본적이며 이미 함수 컴포넌트에서 여러번 사용해 봤던 hook입니다. 간단하게 코드로 살펴보자면 import React, { useState } from 'react' const Counter = () => { const [value, setValue] = useState(0); return ( 현재 값은 {value} 입니다. setValue(value +1)}>+ setValue(value -1)}>- ) }; export default Counter; 위 코드르 생성한 코드는 브라우저 상에서 위와 같은 컴포넌트를 생성하..

소프트웨어 개발 프로세스 소프트웨어 개발 프로세스는 소프트웨어 제품을 개발하기 위해 필요한 과정 또는 구조를 일컷는 말입니다. 우리가 일반적으로 소프트웨어를 개발할 때의 과정에 대해 생각해보면 어떤 소프트웨어를 만들지 ? , 결정은 했는데 어떤 언어로 개발하지? 업무 분담은 어떻게 해야하지? 다 만들었으니 테스트 해봐야지 ... 등등 여러 과정을 거쳐 개발을 진행할 것 입니다. 사실 소프트웨어 개발 프로세스에 어떠한 정답은 없습니다. 소프트웨어를 개발하는 주체가 하는 일련의 과정들이 곧 프로세스이고 모든 소프트웨어는 과정을 거쳐 완성이 되게 됩니다. 그렇지만 매번 개발을 진행할때마다 즉흥적인 개발을 하는 것은 모험에 가깝습니다. 특히, 자본과 직결된 회사에서는 더더욱 해당되는 이야기일 것이고요... 이에..

소프트웨어 개발방법론 소프트웨어 개발방법론이란 소프트웨어를 개발하는 방법에 대한 이론으로서 소프트웨어 개발과정, 절차, 방법, 산출물, 기법 도구들을 체계적으로 정리하고 표준화시킨 것을 의미합니다. 산업화가 진행되고 IT 산업이 육성이 활발하게 진행이 되면서, 소프트웨어 개발의 역사는 어느덧 1960년대를 시작으로해 현재 2020년대까지 현재진행형으로 발전하고 있습니다. 역사적으로 어떤 방법론이 유행을 했는지 그 배경이 무엇인지를 알아보기에는 학문적으로 깊이 파고들어야할 주제이기 때문에 해당 포스트 에서는 소프트웨어 개발 방법론의 종류를 알아보고 다음 포스트 부터는 현재 많은 기업들에서 채택하고 있는 개발모형인 폭포수와 애자일에 대해 다뤄보려고 합니다. 소프트웨어 개발방법론의 종류 개발 방법론의 종류는 ..

라이프사이클 메서드 리액트에는 총 9가지의 라이프사이클 메서드가 존재합니다. 또한 이는 크게 3가지, 마운트 / 업데이트 / 언마운트 카테고리로 나뉩니다 . 첫번째 마운트(Mount) 는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미합니다. 이때 호출되는 메서드는 다음과 같습니다. 컴포넌트 만들기 constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드(생성자 함수) getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링하는 메서드 componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 먼저 코드를 통해 마운트 과정에서 호출되는 메서드를 알..

웹 개발에서의 event는 웹 브라우저에서 DOM 요소들과 상호 작용하는것을 의미합니다. 다른 포스팅 에서 button클릭이라던가, 키보드 입력, 마우스 커서 이동 등등 많은 이벤트 요소들이 있습니다. 이번 포스트에서는 과연 리액트에서는 이러한 이벤트 핸들링을 어떻게 처리하는지에 대해 다뤄보겠습니다. 리액트에서의 이벤트 핸들링 일반적으로 웹개발을 해보신 분이라면 HTML에 기본 이벤트 인터페이스들에 익숙할 것입니다 리액트에서는 해당 이벤트 핸들링 방법이 HTML과 동일하기 때문에 문법을 숙지하는 것은 어렵지 않으나 주의해야할 사항들이 몇가지 존재합니다. 이벤트 이름은 카멜 표기법으로 작성한다 ex) onclick ->onClick , onkeydown-> onKeyDown 이벤트에 실행할 자바스크립트 코..

state state 는 리액트 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다 props는 이전 포스팅에서 자세히 다루어 봤는데, 이는 사용되는 과정에서 부모 컴포넌트에서 설정하는 값이 지정이 되며 컴포넌트 자신은 props를 읽기 전용으로만 사용할 수 있습니다. 즉 props를 바꾸려면 부모 컴포넌트에서 바꾸어주어야 합니다. 하지만 state는 컴포넌트 내부에서 직접 값을 변경하는 것이 가능합니다. state의 종류로는 클래스형 컴포넌트의 state와 함수형 컴포넌트의 useState() 라는 함수가 있습니다 예제를 통해 이 두 가지에 대해 알아보겠습니다. 클래스형 컴포넌트의 state import React, { Component } from 'react'; import PropTypes from ..

모듈 생성 및 import/export 먼저 컴포넌트를 생성해 이를 내보내고(export), 불러오는(import) 작업을 수행해 보겠습니다. 저는 일단 기본 리액트 프로젝트 src 폴더에 > MyComponent라는 폴더를 생성했습니다 그리고 그 내부 동일 명칭의 js 파일을 생성해보았습니다. const style = { color : 'red', } const MyComponent = () => { return new component } export default MyComponent; 해당 JS 의 내용은 위와 같은데 위 내용에서는 가장 아래 줄 export default MyComponent를 유의깊게 확인해 보아야 합니다. 이 코든는 해당 파일을 다른 코드에서 import 할 때 MyCompo..

컴포넌트? 컴포넌트라는 용어는 독립적인 기능을 수행하는 단위 모듈을 의미합니다. 리액트를 사용하는 개발자들에게 있어 애플리케이션을 설계할 때 사용자가 볼 수 있는 여러가지 컴포넌트들을 제공하는데 , 이는 애플리케이션 개발에서 재사용성을 높이고 유지보수를 용이하게 하기 위한 기술입니다. 함수형/클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두가지로 나누어지 집니다. 하나는 함수형 컴포넌트, 하나는 클래스형 컴포넌트 입니다. 이전 포스팅에서 다루었던 내용중 코드 하나를 인용하자면 function App() { const v_react = "React"; return ( {v_react} Test ); } 바로 위와 같은 App 함수 같은 경우가 함수형 컴포넌트 입니다 두번째로는 클래스형 컴포넌트가 있는데 위 ..