Shared State
- 하나의 데이터를 여러 개의 컴포넌트에서 활용해야 하는 경우,
각 컴포넌트에서 State를 개별적으로 보관하지 않고,
공통된 부모 컴포넌트의 state를 사용하는 것이 효율적이다
- Shared State 예제 (Props로 State 공유)
import React, {useState} from 'react';
function DoubleDisplay( {value} ) {
return (
<div>
<span>자식 A(x2) : {value * 2}</span>
</div>
);
}
function TripleDisplay({value}) {
return (
<div>
<span>자식 B(x3) : {value * 3}</span>
</div>
);
}
export default function ShareState() {
const [value, setValue] = useState(0);
const handleChange = (e) => {
setValue(Number(e.target.value));
};
return (
<div>
부모 컴포넌트
<input type='number' value={value}
onChange={handleChange} />
<DoubleDisplay value={value} />
<TripleDisplay value={value} />
</div>
);
}return에서 값을 공유한다
Shared State 활용
- 온도변환계산기(섭씨<->화씨)
- 하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용
- 부모 컴포넌트의 온도(degree) 정보를 공유하여 각 자식 컴포넌트에서는 섭씨, 화씨 온도를표시함.
CFApp.jsx
import React, {useState} from "react";
function ConponentC({ temp, changeTemp}) {
return (
<div>
<span>단위(섭씨) :</span>
<input type='number' value={temp}
onChange={ (e) => changeTemp(e.target.value)} />
</div>
);
}
function ComponentF({ temp, changeTemp }) {
return (
<div>
<span>단위(화씨) : </span>
<input type='number' value={temp}
onChange={ (e) => changeTemp(e.target.value)} />
</div>
);
}
export default function CFApp() {
const [temperature, setTemperature] = useState(0);
const [type, setType] = useState('c');
const toFahrenheit = (celsius) => { // 섭씨 -> 화씨
return ((celsius * 9) / 5 + 32).toFixed(1);
}
const toCelsius = (fahrenheit) => { // 화씨 -> 섭씨
return( ((fahrenheit -32) * 5) / 9).toFixed(1);
}
const handleCilsiusChange = (temp) => {
setTemperature(temp);
setType('c');
};
const handleFahrenheitChange = (temp) => {
setTemperature(temp);
setType('f');
};
const celsius = type == 'c' ?
temperature : toCelsius(temperature);
const fahrenheit = type == 'f' ?
temperature : toFahrenheit(temperature);
return (
<div>
<h2>온도 변환</h2>
<ConponentC temp={celsius} changeTemp={handleCilsiusChange} />
<ComponentF temp={fahrenheit} changeTemp={handleFahrenheitChange} />
</div>
);
}toFixed(1) - 소수점 1번 째 자리까지 반올림 후 String형으로 반환
컨텍스트(Context)
기존 리액트에서 사용되는 전달 방식
- 컴포넌트 간 데이터 전달 방식
- 리액트 컴포넌트 사이에서 props를 통해 데이터를 전달하는 방식
컴포넌트 방식
- React 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수있도록 고안된 방법
- 컴포넌트 트리를 통해 곧바로 컴포넌트에 데이터를 전달하는 방식
- 여러 컴포넌트에서 자주 사용하는 데이터를 사용할 경우
- 사용자의 로그인 여부, 로그인 정보, UI 테마, 현재 선택된 언어
ex) 네비게이션 바에서 사용자의 로그인 여부에 따라 로그인/로그아웃 버튼표시
- Context를 사용하는 예제
- React.createContext
- Context.Provider / Context.Consumer
주의사항
- context를 주된 용도 고려
- context는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 용도
- context 사용 시 컴포넌트 재사용이 어려워질 수 있음
- 꼭 필요한 경우에만 context 사용하고 컴포넌트 합성 방법 사용
Context API
React.createContext
- Context 객체를 생성하기 위한 함수
- Context 객체를 구독하고 있는 컴포넌트를 렌더링할 때,
트리 상위에서 가장 가까이에 있는 상위 레벨의 Provider로부터 현재값을 읽음
- 상위 레벨에 매칭되는 Provider가 없을 경우 defaultValue 사용.
- Provider 없이 컴포넌트를 독립적으로 테스트할 때 유용
- defaultValue를 undefined로 설정하면 구독 컴포넌트에서 기본값을 사용하지 않음
Context.Provider
- Context 객체에 포함된 React 컴포넌트로 데이터 제공자 역할
- 함수 컴포넌트에서 context 구독(읽기)에 사용
- 컴포넌트의 자식은 함수(function as a child)
- 현재 context의 value를 받아서 React 노드를 반환
- value는 context의 Provider 중 가장 가까운 Provider의 value prop과 동일
- 상위 컴포넌트에 Provider가 없다면 createContext()의 defaultValue 값과 동일
Context.Consumer
- function as a child
- 컴포넌트의 자식으로 함수를 사용하는 방법
- 리엑트에서는 기본적으로 하위 컴포넌트들을 children이라는 prop으로 전달
- children으로 컴포넌트 대신 함수를 사용할 수 있음
Context.displayName
- 크롬의 리액트 개발자 도구에서 context를 표시할 때 이 displayName을 표시
예제 (ContextAPI)
import React from 'react';
const ThemeContext = React.createContext('light');
function App(props) {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar(props) {
return (
<div>
<ThemedButton />
</div>
);
}
const styles = {
dark: {
background: 'gray',
color: 'white'
},
ligth: {
background: "white",
color: 'black'
}
}
function ThemedButton(props) {
return (
<ThemeContext.Consumer>
{ value => <button style={value == 'dark' ?
styles.dark : styles.ligth}>Button</button> }
</ThemeContext.Consumer>
)
}
export default App;
useContext
- 함수 컴포넌트에서 컨텍스트를 쉽게 이용하기 – useContext hook
- useContext() 훅은 context 객체를 인자로 받아서 현재 value 값을 리턴
- 컴포넌트 트리상에서 가장 가까운 상위 Provider로부터 context의 value 값을 받아 옴
- context 값이 변경되면 변경된 값과 함께 useContext() 훅을 사용하는 컴포넌트가 재랜더링됨
실습. context를 사용하여 테마 변경 기능 만들기
ThemeContext.jsx
import React from 'react';
const ThemeContext = React.createContext();
ThemeContext.displayName = 'Theme-Context';
// .displayName - 컴포넌트의 이름을 명시적으로 설정
export default ThemeContext;MainContent.jsx
import { useContext } from 'react';
import ThemeContext from './ThemeContext';
function MainContent(props) {
const { theme, toggleTheme, language, setLanguage } = useContext(ThemeContext);
return (
<div
style={{
width: '100vw',
height: '100vh',
padding: '1.5rem',
backgroundColor: theme == 'light' ? 'white' : 'black',
color: theme == 'light' ? 'black' : 'white',
}}
>
<p>테마 변경 웹사이트</p>
<button onClick = {toggleTheme}>테마 변경</button>
<br />
<label>
언어:
<select value={language} onChange={ (e) => setLanguage(e.target.value)}>
<option value='kor'>한글</option>
<option value='eng'>영어</option>
</select>
</label>
<p>{language == 'kor' ? "안녕하세요" : "Hello"}</p>
</div>
);
}
export default MainContent;DarkOrLight.jsx
import { useState, useCallback } from 'react';
import ThemeContext from './ThemeContext';
import MainContent from './MainContent';
function DarkOrLight(props) {
const [theme, setTheme] = useState('light');
const [language, setLanguage] = useState('kor');
const toggleTheme = useCallback( () => {
if (theme == 'light') {
setTheme('dark');
} else if (theme == 'dark') {
setTheme('light');
}
}, [theme]);
return(
<ThemeContext.Provider value = {{ theme, toggleTheme, language, setLanguage }}>
<MainContent />
</ThemeContext.Provider>
);
}
export default DarkOrLight;useCallback()
- 함수를메모이제이션하기 위한 hook
- useCallback() hook을 사용하지 않고 컴포넌트 내에 함수를 정의할 경우, 렌더링이 일어날 때마다 함수가 새로 정의됨
- useCallback() hook을 사용하면 특정 변수가 변경될 때만 함수를 재정의
결과 화면
