Lifting State Up
모든 프로그램이 그렇지만 데이터는 단방향으로 흘러야 합니다 리액트도 마찬가지입니다 부모컴포넌트 와 자식컴포넌특사 있으면 데이터의 흐름은 부모 -> 자식으로 흐르는것이 원칙입니다 예를 들어서 자식에서 수정한 state 의 값이 부모에게 반영이 되는건 데이터 방향도 맞지 않을 뿐더러 데이터라 단방향으로 흐르는 리액트의 원칙을 무시하는 것입니다
예시
예를 들으서 다음과 같은 프로그램이 있습니다 1개의 부모컴포넌트와 2개의 자식 컴포넌트가 있을때 부모 컴포넌트에서는 일정한 값을 받고 그 값을 A 자식 컴포넌트에 서는 제곱을 하고 B 자식 컴포넌트는 거기에 곱하기 2를 하는 프로그램을 만든다고 생각을 합니다 만약 Lifting State Up 을 사용하지 않으면 데이이터의 흐름은 부모 -> A -> 부모 -> B
A에서 B로 바로 못가는 이유는 당연하게도 이 둘은 부모 자식관계가 아니기 때문이다 부모자식관계에서만 데이터를 props 로 전달할 수 있습니다
만들어보기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React from "react";
import { useState } from "react";
import A from "./A";
import B from "./B";
function Parent(props){
const [initValue , setInitValue] = useState(0);
const initValueOnChange = (event) => {
setInitValue(event.target.value);
}
const btnPow = (btnPow_result) => {
setInitValue(btnPow_result)
}
const btn_multiple = (btn_multiple) => {
setInitValue(btn_multiple)
}
return (
<div>
<div>
<input type="number" value={initValue} onChange={initValueOnChange}></input>
</div>
<div>
<A initValue={initValue} btnPow={btnPow}/>
<B initValue={initValue} btn_multiple={btn_multiple}/>
</div>
</div>
)
}
export default Parent
먼저 부모 컴포넌트를 만들어보겠습니다 자식 컴포넌트는 A와 B가 있고 부모컴포넌트에서는 초기값 설정후 연산에 대한 state 변경은 A 컴포넌트 B 컴포넌트에서 진행을 할것입니다
A 컴포넌트
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React from "react";
function A(props ){
const btn_onclick = () =>{
const initValue = props.initValue;
props.btnPow(Math.pow(initValue , 2));
}
return (
<button onClick={btn_onclick}>제곱</button>
)
}
export default A;
크게 별것이 없습니다 단순히 버튼을 하나 랜더링후 안에 onClick 함수를 정의합니다 그리고 props 로 던저주는 initValue 와 함수 btnPow 를 이용해서 btnPow 를 값을 호출하게 됩니다 그러면 부모 OnClick 가 발동이 되게 되며
1
2
3
4
5
6
7
const btnPow = (btnPow_result) => {
setInitValue(btnPow_result)
}
부모의 btnPow 함수는 이런 모양입니다 이때 btnPow_result 안에 props.btnPow(Math.pow(initValue , 2)) 결과에 대한 값이 들어오게 되어서 그걸 받은 부모 onClick 이벤트는 이 값을 state 에 저장을 하게 됩니다
B 컴포넌트
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from "react";
function B(props ){
const btn_onclick = () =>{
const initValue = props.initValue;
props.btn_multiple(initValue * 2)
}
return (
<button onClick={btn_onclick}>2 곱하기</button>
)
}
export default B;
B 컴포넌트도 일치합니다 부모에서 내려주는 값에 * 2를 해서 다시 부모로 돌려주는 자식 컴포넌트입니다 그러면 부모는
1
2
3
4
5
const btn_multiple = (btn_multiple) => {
setInitValue(btn_multiple)
}
이 함수가 발동이 되어서 btn_multiple 안에 props.btn_multiple(initValue * 2) 담겨저서 오는것이고 이 값을 state 에 저장을 하는것입니다
의문
그럼 여기서 다시 값이 자식 -> 부모로 간것이 아니냐 할 수도 있습니다 하지만 state 는 부모에게 있기 때문에 자식과 부모는 state 를 공유할뿐 실제 데이터의 흐름은 부모 -> 자식으로 흘렀고 자식에서 state 를 수정한것을 부모랑 같이 공유하는 것입니다 이것을 Share State 라고 합니다
쓰이는 곳
그럼 이것은 주로 로그인을 해서 최상위 부모 컴포넌트가 세션을 가지고 있고 그것을 자식의 세션과 같이 공유를 하는 것입니다 만약 자식의 화면에서 로그아웃을 진행을 했다면 세션 state 공유를 통해서 부모도 자동으로 로그아웃 상태로 만드는 것입니다