프론트 세미나 2‐2 과제

문제 상황

• App.js에 정의된 part가 Context.js, Left.js/Right.js, MemberList.js에 걸쳐 이동하여 props drilling이 발생

해결 방법

• Context-API를 사용하여 App.js에서 MemberList.js 파일로 바로 part를 넘긴다.

해결 과정

1. 과제 레포 클론

• 바탕화면에 새 폴더를 만들고 과제 레포를 clone한다.
• clone 받은 폴더와 기존에 연결되어 있는 깃 저장소와의 연결을 끊는다.

git remote rm origin rm -rf ./.git

• 클론 받은 폴더를 본인이름 레포 폴더로 옮긴다.
• yarn install로 node-modules 폴더를 설치한다.

2. Context 생성

1. [정의] createContext()를 통해 context 생성
2. [범위 설정 시] PartContext.Provider를 PartProvider라는 하나의 컴포넌트로 작성

컴포넌트에 context가 사용할 데이터를 설정해줌. (part, setPart)

3. [사용 시] usePart라는 커스텀 훅을 만들어 useContext() 대신 사용

• PartContext.js

3. Provider 범위 설정

• PartContext.js에서 만든 PartProvider 컴포넌트를 통해 Context-API가 적용되는 범위를 설정

세미나 때는 App.js 이하 폴더에서 사용했지만 이번에는 App.js도 데이터를 사용하기 때문에 상위 파일인 index.js에서 범위를 설정

• index.js

4. 데이터를 usePart 훅으로 불러오기

• props drilling을 일으켰던 part/setPart를 PartContext.js 파일에서 만든 usePart 훅을 이용해 데이터를 불러와서 사용한다. const { part, setPart } = usePart();

• MemberList.js

• Left.js