'처음배우는 리액트 네이티브'(한빛미디어, 김범준 지음)을 보며 채팅 어플리케이션을 따라 만드는 중입니다.
로그인 화면과 회원가입 화면 만들기
간단하게 구현 후 src/screens에 Login.js와 Signup.js를 만든다.
이후 동일한 디렉터리에 index.js파일을 만들어 다음과 같이 작성한다.
`
import Login form './Login';
import Signup from './Signup';
export {Login, Signup};
`
스택 내비게이션 생성
Hook 학습하기
Context
context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.
일반적인 React 애플리케이션에서 데이터는 위에서 아래로(즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에게 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다. 이 때, context를 이용하면 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다.
context를 사용할 때
context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 테마, 선호하는 언어등이 이러한 데이터에 해당됩니다.
`
class App extends React.Components {
render() {
return ;
}
}
function Toolbar(props) {
return (
<div>
<ThemedButton theme={props.theme} />
</div>
); // Toolbar 컴포넌트는 불필요한 테마 prop를 받아서
// themedButton에 전달해야 합니다.
// 앱 안의 모든 버튼이 테마를 알아야 한다면
// 이 정보를 일일이 넘기는 과정은 매우 곤혹스러울 수 있습니다.
}
class ThemedButton extends React.Component {
render() {
return ;
}
}
context를 사용하면 중간에 있는 엘리먼트들에게 props를 넘겨주지 않아도 됩니다.
//context를 사용하면 모든 컴포넌트를 일일이 통하지 않고도
//원하는 값을 컴포넌트 트리 깊숙한 곳까지 보낼 수 있습니다.
//light를 기본값으로 하는 테마 context를 만들어 보겠습니다.
const ThemeContext = React.createContext('light');
class App extends React.Component {
render() {
return (
<ThemeContext.Provider value="dark">
);
// Provider를 이용해 하위 트리에 테마 값을 보내줍니다.
// 아무리 깊숙히 있어도, 모든 컴포넌트가 Provider를 통해 해당 테마 값을 읽을 수 있습니다.
// 예시는 dark를 현재 선택된 테마 값으로 보내고 있습니다.
}
}
// 이젠 중간에 있는 컴포넌트가 일일이 테마를 넘겨줄 필요가 없습니다.
function Toolbar() {
return (
<div>
<ThemedButton />
</div>
); }
class ThemedButton extends React.Component {
static contextType = ThemeContext;
// 현재 선택된 테마 값을 읽기 위해 contextType을 지정합니다.
// React는 가장 가까이 있는 테마 Provider를 찾아 그 값을 사용할 것입니다.
// 이 예시에서 현재 선택된 테마는 dark입니다.
render () {
return <Button theme={this.context} />;
}}
`
useContext
const value = useContext(MycContext);
context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환합니다. context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 < MyContext.Provider >의 value prop에 의해 결정됩니다.
useContext로 전달한 인자는 context 객체 그 자체여야 한다.
출처
