[React]6. Context API

React_07_Context API

 

[ContextAPI]

1. 컴포넌트의 구조: 단방향 데이터 흐름

 

• 상위컴포넌트에서 하위컴포넌트로 데이터 전송
• 장점: 관리 용이,DOM 요소와의 궁합

• 단점

-하위컴포넌트에서 상위컴포넌트로 데이터전송이 불가

-하위컴포넌트끼리의 데이터전송 불가

 

2. 양방향 데이터 전송방법

1)상위→하위 컴포넌트: input의 value값으로 데이터 전송

2)하위→상위 컴포넌트: 함수의 매개변수로 데이터 전송

 

• props로 데이터를 전달할 때 발생하는 문제

       - 최하단에 위치한 컴포넌트에서 최상위 컴포넌트로 데이터를 전달해야 하는 경우 

     여러 컴포넌트를 연달아 props 전달해야 함(props drilling)

      - 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달하는 과정이 불편함

       →context라는 데이터 보관함을 만들어 전역적으로 상태 관리!

 

 

3 .Context API: 컴포넌트 트리 전체에 데이터 제공하여 리액트 컴포넌트 간에 값을 전역적으로 공유할 수 있는 기능

 

*Redux: Context API보다 용량이 큰 보관함

 

[setting]

 

  1. context 파일 생성(src 폴더-context 폴더-ColorContext): createContext

  

     2. context를 사용할 컴포넌트에 createContext import

 

     3. 전역적으로 관리할 컴포넌트를 Context.Provider로 감싸서 범위 지정

 

     4. State로 전달할 값을 선언하고 Provider value 속성으로 객체 형태로 값 전달

value={{State 변수명 SetState 변수명}}

 

5.  데이터를 받을 컴포넌트에서는 useContext 함수 이용

[ColorList]

-배경색들을 배열로 만든 후 map()  함수를 이용해 반복해서 div 출력하기

-const{SetState 변수명}=useContext(Context 이름)

-버튼 클릭 시 선택한 배경색으로 State 값 변경

[ColorResult]

-const{State 변수명}=useContext(Context 이름)

-[ColorList]에서 선택한 색상을 State로 설정한 값을 받아와서 변경하기

 

[실습]다크모드 

 

 

[ThemeContext.js]Context 생성하기

 

[App3.js]상위 컴포넌트

-Dark모드 상태를 관리하는 State 생성

-Context.Provider로 컴포넌트 감싸고 value로 State를 전달하기

 

[Header.jsx]하위 컴포넌트1

-useContext로 데이터 받기: {State 변수명}=useContext(Context 이름) 

-Dark모드일 때 아닐 때에 따라 삼항연산자로 배경색, 글씨색 변경하기

 

[Main.jsx]

-화면에 표시할 내용 배열 생성하기

-배열을 반복해서 출력하고 key 값 지정하기

-button 태그에 함수 등록하기

 

-State 선언하기

 

-useContext로 데이터 받아오기

 

-버튼 클릭 시 State 값 변경하여 다크모드 전환하고 텍스트 변경하기

 

-다크모드와 아닐 때에 따라 배경색, 글씨색 변경하기

 

[Ref]

1. Ref: render 메소드에서 생성된 DOM노드나 React element에 접근하는 방법 제공

 

[실습1]버튼 클릭 시 박스 크기 변경

[App4.js]

1. Ref 선언하기: const Ref 변수명=useRef();

2. Ref를 적용할 태그에 Ref 등록하기: ref={Ref 변수명}

 

3. 하위에서 상위 컴포넌트로 값 전달할 함수 생성하기

• 요소의 크기 조절하기

-Ref 속성 변경: Ref 변수명.current.속성명=변경할 값

-changeBox 함수에서 보낸 값으로 크기 조절하기

• 버튼 클릭 시 클릭한 요소 가져오기

-매개변수: e(이벤트 객체)

-선택한 요소의 Content 가져오기: e.target.innerText

-changeSize 함수로 값 전송하기: changeSize(변경할 값)

 

4. return문에서 컴포넌트로 클릭한 요소를 전달하기: changeBox 함수 등록하기 

 

[ButtonList.js]

1. 상위컴포넌트로 값 전달하기

-change 함수를 매개변수에 작성하여  [App4.js]로 값 전달하기

-버튼 텍스트 배열값을 map()함수로 반복해서 출력하기

-버튼 클릭 시 changeBox 함수가 실행되도록 함수 등록하기

 

[실습2]입력값에 따라 해당 사진 출력하기

 

1. 이름과 이미지주소가 담긴 배열 생성

 

2. Ref 선언하기(useRef)

-input 입력값과 이미지에 대한 Ref 선언

 

3. Ref 적용하기 

-input 태그와 img 태그에 Ref 적용: ref={Ref 변수명}

-img 태그의 기본 src는 {imgList}에 있는 첫 번째 사진 주소 입력(imgList[0].src)

 

4. 버튼 클릭 시 이미지 변경 함수(map/forEach/Switch문…)

 

5. 포커싱: .focus()