[React.JS] 리액트Hooks. createContext, useContext 활용(1)

* contextAPI (createContext, useContext) ? 

--> 리액트 컴포넌트가 구조적으로 복잡할 경우 최상위 컴포넌트로 부터 전달되는 속성(Props)이 최 하위 컴포넌트에게 최종적으로 전달되기 까지 중간컴포넌트들을 거쳐 연속적인 전달과정이 발생된다. contextAPI는 사용할 속성(Props)을 저장하며 모든컴포넌트에서 전역적인 접근이 가능하다 또한, 외부에서 contextAPI를 선언하여 활용가능하다.

 

* contextAPI 사용 ?

const 컨텍스트명 = createContext('기본 값');

--> createContext() 함수를 사용하여 컨텍스트를 생성한다. 함수 내부에 파라미터로써 기본값을 설정할 수 있다. 

기본값이란, <컨텍스트명.Provider value="..."> 태그를 활용하지 않았을 경우 지정되는 값이다.

     

const 컨텍스트값 = useContext(컨텍스트명);

--> useContext() 함수를 사용하여 생성된 컨텍스트에 저장된 값을 활용한다.

 

 

---

 contextAPI Exercise..

 

 

1. ExerciseContext 생성 (컨텍스트 사용X)

* 최상위 컴포넌트 "One"에서 선언한 Props(userName, userNickName) 두 요소가 Two .. Three .. Four 컴포넌트에게 순차적으로 전달되고 있다. 

* 컨텍스트를 사용하지 않을시, Props가 전달되는 과정에서 모든 컴포넌트를 거치는 상황이 발생한다.

 

 

 

2. ExerciseContext 수정(1)

Step1. react로 부터 contextAPI (createContext, useContext) 함수 Import..

 

Step2. createContext() 함수를 사용하여 컨텍스트를 생성, 파라미터로('기본 값') 설정.

--> <컨텍스트.Provider value="..."> 선언하지 않았을경우 '기본 값' 이 적용된다.

 

Step3. 최하위 컴포넌트 "Four" 에서 생선된 context사용 ( 상위 컴포넌트에서 전달한 Props사용X )

--> useContext() 함수를 통하여 context에 저장된 값을 활용한다.

        

 

 

3. ExerciseContext 수정(2)

* createContext() 함수로 생성된 컨텍스트(UserContext)에 관하여 최상위 컴포넌트 "One" 에서 UserContext 컴포넌트 선언 및 초기값을 설정 하였다.  <UserContext.provider value="초기값" /> 

 ( 초기화 하였으므로 createContext() 의 파라미터로 전달된 "기본값"은 무시된다. )   

 

* 최하위 컴포넌트 "Four"에서 <UserContext/> 컴포넌트로부터 전달되는 값을 선언 및 활용한다.

 ( 상위컴포넌트 Two, Three에서 Props가 전달되지 않는다. Context로 부터 직접 활용한다. ) 

 

 

 

4. contextAPI 적용확인 (Local Browser)

* 최하위 컴포넌트 "Four"에서 <UserContext/> 활용 ( 상위컴포넌트 Two, Three에서 Props가 전달X ) 

 

 

 

exit..