리액트 특징
React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌,
컴포넌트 단위로 시작한다는 점이 가장 큰 특징이다.
간단히 위 사진에서 보면,
컴포넌트는 크게 3가지로 볼 수 있는데,
검색창, 검색 결과창, 겸색 연관 컨텐츠창으로 보면 된다.
이 컴포넌트들에 기능들을 넣어서 최종 조립하여 렌더링 하는 것인데,
상향식(bottom-up)으로서 테스트가 쉽고, 확장성이 좋다는 장점이 있다.
또한, 컴포넌트는 단일 책임 원칙으로서 한 가지 일만 수행한다.
리액트 특징 요약
1. 컴포넌트 단위로 이루어진다.
2. 컴포넌트 단위로 이루어져 있기 때문에 테스트가 쉽고, 확장성이 좋다.
3. 컴포넌트들은 한 가지 일만 수행한다.
데이터의 흐름은?
위 사진은 유튜브라는 전체를 감싸는 컴포넌트인 유튜브가 있고,
각기 다른 기능을 가진 검색창, 검색 결과창, 연관 검색 결과창 컴포넌트가 있다.
리액트에서의 데이터 흐름은 데이터를 전달하는 주체인 부모 컴포넌트에서 자식 컴포넌트로의 하향식(top-down)이다.
데이터는 단방향 데이터 흐름(one-way data flow)으로 props를 통해 전달된다.
또한, 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못한다.
단방향 데이터 흐름이라는 것은 리액트의 핵심이다!
상태(state)는 어디에 위치해야 할까?
상태가 특정 컴포넌트에서만 유의미하다면, 특정 컴포넌트에만 두면 되니까 크게 어렵지 않지만, 만일 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면 이 때에는 공통 소유 컴포넌트를 찾아 그 곳에 상태를 위치해야 한다.
즉, 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 상태를 위치해야 한다는 것이다.
위의 사진으로 보면 검색 결과 컴포넌트와 연관 검색 결과창 모두 검색 결과 목록에 의존하기 때문에 유튜브 컴포넌트에 상태가 위치해야 한다.
역방향 데이터 흐름?
리액트는 단방향 데이터 흐름이 핵심이라고 했는데,
만약, 하위 컴포넌트의 어떤 액션으로 부모 컴포넌트에 존재하는 상태가 변하게 될 경우, 어떻게 해야할까?
이때 필요한 것이 "State(상태) 끌어올리기(Lifting state up)"이다.
상태를 끌어올리기 위한 방법은 상태를 변화시키는 함수를 하위 컴포넌트로 props를 통해 전달하여 하위 컴포넌트가 해당 함수를 실행하게 하여 해결한다.
상태 끌어올리기 예제 코드
function ParentComponent() { const [value, setValue] = useState("내 상태 바꿔줘ㅠ"); <br> const handleChangeValue = () => { // 상태변경 함수 setValue("너의 상태를 바꿔줄게!"); }; <br> return ( <div> <div>값은 {value} 입니다</div> <ChildComponent handleButtonClick={handleChangeValue} /> // props로 하위컴포넌트에 전달 </div> ); }
