React - React로 사고하기

1. 각기 다른 컴포넌트에서 동일한 State를 사용해야한다?

→ 각기 다른 컴포넌트더라도 최소공배수처럼 서로 공통되는 상위 컴포넌트가 존재할 것이다. 그 곳에서 State를 선언하고 밑으로 보내줘야한다. (for 단방향 데이터 흐름)

 

2. 전역변수로 생성된 데이터를 두개이상의 컴포넌트들이 각자 이용하려한다?

→ 무조건 한 곳의 위치, 하나의 데이터에서 끌고와야한다. 끌고오기 편한 위치에 데이터를 사본으로 저장하고 끌고오다보면 React를 제대로 쓰지 못할 수 있다. (for 데이터 무결성)

 

 

참고

무조건 필요한건 아니지만, 현장에서는 상태 관리를 위한 툴로 

• React Context
• Redux
• MobX

를 사용하고 있다. 이는 React에서의 전역상태저장소 제공 및 Props drilling 이슈를 해결해 줄 수 있다.

전역상태저장소는 이름그대로 이해하면 되지만, Props drilling 이슈는 알아볼 필요가 있다.

예를 들어, <A>라는 컴포넌트에 상태가 있고, <I>라는 컴포넌트가 해당 상태를 사용한다고 하면, 그 중간에 존재하는 <C>, <G> 등은 굳이 name이라는 상태가 필요하지 않음에도, 컴포넌트에 props를 만들어 자식 컴포넌트에 넘겨주어야 했다. 이를 props drilling(프로퍼티 내려꽂기) 문제라고 부른다. 전역 상태 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있다면 이러한 문제는 해결될 것이다.