컴포넌트 내부의 데이터 흐름
React 개발 방식😎
React는 페이지 단위가 아닌 컴포넌트 단위로 시작하여 페이지로 조립해나가는 상향식 방식을 채택한다. 이를 사용하면 테스트가 쉽고 확장성이 좋다는 장점을 가진다. 이러한 컴포넌트를 디자인 할 때에는 "하나의 컴포넌트는 한 가지 일만 한다"는
단일 책임 원칙
을 따른다.
props
를 이용해 데이터를 전달인자나 속성처럼 받을 수 있음공통 소유 컴포넌트
를 찾아 상태를 위치시켜야 함props
로 전달하여 해결할 수 있음상태 끌어올리기(Lifting State Up)
State 끌어올리기란 부모 컴포넌트의 상태가 하위 컴포넌트에 의해 변하는 경우 단방향 데이터 흐름 원칙에 어긋나므로 이에 부합할 수 있도록 해주는 하나의 방법이라고 할 수 있다. 상태 끌어올리기는
상위 컴포넌트
에서 상태를 변경하는 함수를 정의하고하위 컴포넌트
에서 상태를 변경하는 함수를 실행하는 방식으로 수행된다.
React 컴포넌트 외부에서 데이터 처리하고 받아오기
Side Effect(부수 효과)🧐
함수 내에서의 어떠한 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 side effect가 있다고 말한다. React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM을 직접 조작할 때 side effect가 발생했다고 말할 수 있는데 이를 다루기 위한 hook이
Effect Hook
이다.
useEffect 사용🤔
useEffect의 첫 번째 인자는 함수, 두 번째 인자는 배열이 들어가는데 배열은 조건을 담고 있다. 특이한 점은 이 조건이 표현식이 아니라 어떤 값의 목록이 들어간다는 점이다. 이러한 배열을 종속성 배열이라고 부르며 여기에 들어가는 조건은 어떤 값의 변경이 일어날 때라는 것을 의미한다.
useEffect(함수)
: 컴포넌트가 처음 생성되거나, props나 state가 업데이트 될 때마다 실행useEffect(함수, [])
: 컴포넌트가 처음 생성될 때 (한 번만) 실행useEffect(함수, [deps])
: deps가 업데이트 될 때마다 실행useEffect를 사용한 data fecthing
장점 | 단점 | |
---|---|---|
컴포넌트 내부에서 처리 | HTTP 요청 빈도를 줄일 수 있음 | 브라우저 메모리 상에 많은 데이터를 갖게 되므로 클라이언트의 부담이 늘어남 |
컴포넌트 외부에서 처리 | 클라이언트의 부담이 줄어듦 | 빈번한 HTTP 요청으로 서버의 부담이 늘어남 |
class component🤓
React에서의 component에는 class component와 function component가 있는데 class component는 life cycle 메서드를 제공하는 등 여러 기능들로 React 초기 버전에서 많이 사용했지만 이후 hook을 통해 function component를 개선하여 주로 사용하게 되면서 class component는 거의 사용하지 않게 되었다. function component와의 가장 큰 차이점은 React의 모든 class component는
React.component
를 상속받아 만들어진다는 점이다.
function component | class component |
---|---|
state 사용 불가 | 생성자에서 state를 정의 |
Lifecycle에 따른 기능 구현 불가 | setState()함수를 통해 state 업데이트 |
Hooks | Lifecycle methods 제공 |
props
가 변경되거나 setState() 함수 호출에 의해 state
가 변경되거나 forceUpdate()라는 강제 업데이트 함수 호출에 의해 컴포넌트가 다시 렌더링 되는 시기즉, 컴포넌트는 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트되다가 사라지게 되는데 이는 function component도 마찬가지이다.
Hook🪝
hook은 갈고리를 의미하는데 React에서는 React의 state와 생명주기에 갈고리를 걸어 원하는 시점에 정해진 함수가 실행되도록 만들었는데 이 때 실행되는 함수가 hook이라고 한다.
참고
한빛미디어-처음 만난 리액트
React-state와 생명주기
React-component와 props
React-React.component
<오늘의 일기>
점점 더 어려울 일만 남았다는 크루분의 말씀처럼 정말 갈수록 쉽지 않다는 생각이 들었다...ㅎ 항상 생각하는 점이지만 나는 개념적인 부분을 이해하는 것은 어느 정도 잘 수행하고 있지만 실제로 활용하는 측면에서는 조금 취약한 부분이 있다는 생각이 들었다. 또한 이해하고 활용할 수 있는 부분임에도 불구하고 주어진 문제를 해결해야 한다는 마음이 앞서 구조를 꼼꼼히 살펴보지 않고 무턱대고 풀어가다 생각이 꼬이는 경우도 생각보다 많다는 것을 깨닫게 되었다. 앞으로는 활용적인 측면도 중요하지만 우선 내가 파악할 수 있는 부분에 한해서는 최대한 꼼꼼하게 살펴보고 그 다음 문제를 해결해 나가는 습관을 들여야겠다.