본문 바로가기

나의 FE피봇이야기/React

[React] state mirroring(상태 동기화)

부모에서 자식으로 데이터를 넘겨줄 때, 우리는 prop을 사용한다. 다만 여기서 어떤 목적성을 가지고 데이터를 전달 할 것인지에 따라서 child component에서 데이터 처리 방식이 달라진다.

리엑트 공식 문서

1. perfect sync(완전 동기화)

- 무조건 prop으로 내려 받은 키워드를 그대로 쓸 것.

function Message({ messageColor }) {
const color = messageColor;

 

2. initial data(최초의 데이터 값)

- 맨 처음 데이터를 값을 설정 할 때만 사용 할 것.

function Message({ initialColor }) {
// The `color` state variable holds the *first* value of `initialColor`.
// Further changes to the `initialColor` prop are ignored.
const [color, setColor] = useState(initialColor);

 

 

원글 : 리엑트 공식 문서

https://react.dev/learn/choosing-the-state-structure