- Quiz : 텍스트 입력기를 만들어보자! ✍ 우측 인풋에 텍스트를 입력하고 [완성] 버튼을 누르면 좌측 네모 박스에 입력한 텍스트가 나오게 해보기 - Quiz 설명 : 그간 배운 내용을 바탕으로 텍스트 입력기를 만들어보자! 힌트: 1. 좌측 네모 박스, 우측 인풋, [완성]버튼를 각기 다른 컴포넌트로 분리해서 만들어봅시다. 2. 텍스트 값을 가져올 땐 useRef()를 사용하세요. 3. useState()를 사용해서 네모 박스에 값을 넣어주세요. 4. useState()는 App 컴포넌트에서 만들어주세요. - 내가 만든 것. component를 각자 따로 만들어주라고 했기 때문에 SquareBox, TextInput, SuccessBtn component를 생성해줌. - App.js import { ..

1. React Hook 1-1. React Hook이란? : Hook은 16.8버전부터 새로 추가된 기능입니다. 함수형 컴포넌트에서도 상태 값을 관리하거나 그 밖의 여러 React 기능을 사용할 수 있게 하기 위해 태어났어요. 훅은 자바스크립트 함수. 아래처럼 생김. useEffect(() => { // something... }, []) Hook의 종류는 useState, useEffect, useContext, → 기본 hook useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue → 추가 hook 가 있음. 1-2. Hook을 사용할 때 규칙 1. 오직 함수형 컴포넌트에서만 쓸 수 있..

3. 리액트 본격적으로 살펴보기 3-1. CRA로 첫 리액트 프로젝트 세팅하기 1. node로 yarn 설치하기 node -v # node 버전을 확인해봅니다. npm -v # npm은 노드의 패키지 매니저예요. 이걸 통해서 누군가 만들어 둔 패키지를 설치하고 사용할 수 있어요! npm install -g yarn # -g는 글로벌로 설치하겠다!고 알려주는 옵션입니다. yarn을 글로벌로 설치해봅시다! 2. yarn으로 create-react-app 설치하기 yarn -v # yarn 버전을 확인해봅니다. # global은 글로벌 설치 옵션입니다. # yarn은 npm과 명령어가 조금 다른데요, install 대신 add를 씁니다. # 이런 명령어의 차이는 공식문서를 통해 확인해도 좋고, yarn --h..