211218 리액트 Context

컴포넌트 사이에 데이터는 어떻게 전달할까?

 

* 상위 컴포넌트에서 하위 컴포넌트를 전달할때 속성값을 사용하는데,
간단하면 속성값도 되지만, 많은 수를 사용한다면, 깊어지면
중간 컴포넌트는 전달하는게 점점 많아짐. 기계적으로 내려준다

-> 이때 context를 사용하자!

//usage

import React, {createContext} from 'react';

const UserContext = createContext('초기값');

데이터를 넣을때는 상위 컴포넌트에서
UserContext.Provider value ="mike" 식으로 추가한다.
ex)

import React, {createContext} from 'react'

export default function App(){
	return <div>
	<userContext.Provider value = "mike">
	<div >
	//...내용
	<Profile />
	</div>
	</UserContext.Provider>
	</div>
}
	 
function Profile(){
	return{
		<Greeting />
	}
}

function Greeting(){
	
	return
	<>
		<UserContext.Consumer>
			{username => <p> {`${userName} 하이요`}</p>}
		</UserContext.Consumer>
	</>
}

=> 부모로 올라가면서  userName의 값을 올라가면서 찾고, 없으면 초기값을 넣게됨.

* Provider의 값이 변경될 경우 ?
 하위의 모든 "Consumer" 컴포넌트들은 다시 랜더링된다.
 = 중간의 컴포넌트가 렌더링 되지 않음!!
, Greeting은 다시 렌더링.


반영을 확인하려면?

<input type="text" value={name} onChange={e=>setName(e.target.value}}; />
 

---

위에까지는 

return 
<UserContext.Consumer>
{username => <p> {`${userName} 하이요}</p>}
</UserContext.Consumer>

이렇게 렌더링 시 쓰는 jsx 문구 내에서만  사용할 수 있었다.

//다른 컴포넌트로 래핑하거나 했는데... 내부 변수에서는 사용하지 못하는데, 

 

훅을 사용하면 간단함.
function Greeting(){
const userName = useContext( UserContext );
}


 * 데이터의 종류별로 Context를 나누면 렌더링 시 이점이 있음.



ㅡㅡㅡ


이번에는 하위컴포넌트에서 수정한 것을 상위 컴포넌트로 보내자


function Greeting(){

const setUser = useContext ( SetUserContext);

// UserContext의 값을 받는 것이 아니라,
// SetUserContext에 담긴 setState 함수를 받아서 하위에서 사용 가능.
}

=> 많은 context는 불편하다. reducer를 사용하자. (나중)


* context 사용시 불편한 점?

<UserContext.Provider value ={{username, age}}>
// 이렇게 되면 같은 값을 넣어도 하위 컴포넌트가 렌더링 되는 경우가 있다.
// username,age가 아닌 count,setCount]=useState(0);
// 인 경우 count가 변경되면 다시 렌더링 -> {username,age} 가 다시 세팅됨.

const [user, setUser] = useState({username:'',age:0});
<UserContext.Provider value ={user}>
=> 즉 이렇게 하나의 객체로 관리해버리자.


* Provider 밖에서 만날 수 있도록 작성하자
ex) 못만나는 경우

function outside(){
	return 
		<>
			<UserContext.Provider value="a">
			{
				//...
			} 
			</UserContext.Provider>
			
			<Profile /> // profile 하위 Greeting는 UserContext.Provider의 value를 얻지 못해 초기값이 나온다.
		</>
}

=> 보통 루트 js를 감싸주는 형태로 코딩한다