"난 너만 바라봐" 🥹

리액트를 공부하면서 여러 중요한 개념들이 있겠지만, 그 중 하나는 바로 이 주제가 아닐까싶다.

단방향 데이터 흐름

| 데이터는 부모 컴포넌트에서 자식 컴포넌트로만 흐르며, 자식은 부모의 상태를 직접 변경할 수 없다.

단방향 데이터 흐름은 어떤 내용들을 담고있을까?

• 상태(state) 는 항상 부모 컴포넌트에서 관리한다.
• 부모 컴포넌트가 자식 컴포넌트에 속성(props) 으로 데이터를 전달한다.
• 자식 컴포넌트 내부에서는 부모 컴포넌트 상태를 직접 변경할 수 없다.
• 자식이 부모의 상태변경을 요쳥하려면, 부모가 함수를 내려주고 자식이 그 함수를 호출해야한다.
• 단방향 데이터 흐름 구조로인해 데이터의 흐름이 예측가능하며, 앱이 복잡해져도 관리가 용이하다.

복잡한 폼 로직을 만들더라도 단방향 데이터 흐름 구조를 잘 지켜야 오류없이 작동한다.

위에서 살펴본 단방향 데이터 흐름의 특징 중 부모 컴포넌트가 자식 컴포넌트에 속성(props) 으로 데이터를 전달한다고 하였는데 관련해서 자세히 살펴보자.

컴포넌트 상태는 내부에서만 읽기/쓰기가 가능하며, 외부에서는 상태에 접근할 수 없도록 보호된다.
그러므로 하위 컴포넌트와 상태를 공유해야할 경우에는 하위 컴포넌트에 공유해야하는 내용을 속성(props)에 담아서 전달해야하는 것이다.

이렇게 전달된 속성(props)는 읽기전용(readonly)라서 하위 컴포넌트에서 직접 수정은 할 수 없다. ❌

이러한 내용은 우리가 알고있는 <input />, <textarea>, <select> 등의 폼 입력요소에도 동일하게 적용된다. ⇒ 입력값도 상태로 관리하며, 변경은 부모 컴포넌트에서 제어한다.

접근성을 생각한다면 label, aria- 속성도 적극활용하자!

🔗 참고자료
https://ko.react.dev/learn/passing-props-to-a-component
https://ko.react.dev/learn/sharing-state-between-components