useState2 [react] 예제로 따라하는 리액트 훅(hook) - useState useState 간단한 예시를 통해서 리액트 훅의 useState을 살펴보겠습니다. 위의 사진들처럼 화면 아래쪽에 3개의 동그란 버튼을 누르면, 화면 중앙의 정사각형이 해당하는 버튼의 색으로 변경되는 예입니다. 프로젝트 설치단계부터 하나씩 진행하겠습니다. 리액트에 처음 입문하시는 분들도 천천히 따라 해보시길 바랍니다. create-react-app으로 프로젝트를 설치합니다. npx create-react-app hooks-react 저는 에디터로 Visual Studio code를 사용하겠습니다. code 명령어로 프로젝트를 실행합니다. code hooks-react 기본화면을 지우기 위해 src폴더에서 App.js와 index.js를 제외한 모든 파일을 지워줍니다. 스타일 작업을 위해 styled-co.. 2019. 8. 2. [react] 리액트 훅(react hook)이란? - 클래스형 컴포넌트와 비교 React Hook React 16.8 버전부터 정식으로 릴리즈 된 React Hook에 대해 살펴보겠습니다. 1. 리액트 컴포넌트의 두 가지 형태 리액트에서는 두 종류의 컴포넌트가 사용됩니다. 클래스형 컴포넌트와 함수형 컴포넌트입니다. 기존의 개발방식에서는 주로 함수형 컴포넌트를 사용하며, 상태 관리나(state) 생명주기 관련(life cycle method) 기능이 필요할 때만 클래스형 컴포넌트를 활용하였습니다. 주로 함수형 컴포넌트를 사용했던 이유는 클래스형 컴포넌트의 단점 때문입니다. 2. 클래스형 컴포넌트의 단점 2-1. 복잡성과 길이 클래스형 컴포넌트는 constructor, this, binding과 같은 여러 규칙을 따라야 하며, 이로 인해 코드가 복잡하고 길어질 수 있습니다. 클래스 기.. 2019. 7. 30. 이전 1 다음
