React 의 단방향 흐름에 대해서

props 는 단방향인데 함수는 부모쪽에서 실행된다?

헷갈려서 정리를 해보았다.

 

 

1. SearchBox 에 onSeach 라는 함수를 props 로 내려줌.

    onSearch 는 사실상 App.jsx 에 정의된 searchBus 이다.

App.jsx 부모

 

2. 자식 SearchBox는 onSearch를 그냥 받은 props 로 호출만 함.

    즉, SearchBox 는 busNumber, direction을 부모한테 보고만 한다.

 

SearchBox.jsx

 

3. busNumber, direction를 가지고 부모쪽 (App.jsx)의 searchBus 를 실행한다.

App.jsx

 

🔑 그래서 React 실무 패턴

상태(state)와 그 상태를 바꾸는 로직은 같은 컴포넌트에 있어야 한다!

✔️ 상태는 최대한 상위에!
✔️ 상태 변경 함수도 같이 상위에!
✔️ 자식은 필요하면 props로 함수만 받음