1. React의 특징
React는 data 표현과 전달이 모두 이루어지는 문법이 핵심이다.
React는 기본적으로 프론트엔드 목적의 라이브러리로,
넓게 보면 data 구현에 초점을 맞춘 logic 구현을 맞춘 문법을 활용한다.
그러나 logic을 세부적으로 들여다보면, data 전달을 중심으로 하는 xml 문법 역시 매우 중요하게 활용된다.
이 data 전달은 class state 관리를 통해 이루어지고,
최종적인 rendering은 component props를 통해 이루어진다.
이러한 구현 pattern을 component pattern이라 한다.
반복되는 UI요소에 대해선 Component화하여 재활용한다.
UI를 구성할 때 UI를 하나의 요소들로 나누는 요소적인 접근이 가능해야하고,
요소접근을(props) 통해 각각의 UI를 구현할 Component 요소와 구조를 구상하고 구현하는 것이 중요하다.
2. Component Pattern
Reat의 Component Pattern이 가지는 특징은 크게 두가지로 나뉜다.
React.component class를 통해 데이터를 전달받고,
딤당 component의 props를 매개로 여러 객체 및 속성을 사용할 수 있다.
data 전달을 위해 xml문법을 통한 logic 구현이 이루어진다.
이때 여러 함수, component의 선언과 호출이 중심이 된다.
쉽게 말하면 여러 component들의 사용을 통해 React 화면이 구현된다는 의미이다.
보통은 이 component들은 함수라 칭하고, 다양한 함수들의 lifecycle이 어우러져 data전달과 UI구현이 진행되는 것이다.
3. hook
이러한 Component logic이 과도하면 코드용량이 커지게 되고, 이로 인한 유지보수가 어려워진다.
이러한 class 및 component를 통한 lifecycle를 함수지향형 프로그래밍으로 전환한 것,
다시 말해 한 줄의 함수형 프로그래밍으로 코드를 경량화하여 class 및 component없이 UI구현이 가능하도록 기능을 지원하는 도구가 hook이다.
이는 React 공식문서에 나타난 hook의 정의인데, 쉽게 말하면 여러 함수를 선언하고 사용하지말고 hook을 통해 간결하고 명확하게 logic을 구현하라는 의미이다.
가장 대표적인 hook으로 useState, useEffect가 있다.
hook을 사용하면, 별도의 함수선언없이 hook에 내재되어있는 상태함수나 상태변수 등을 이용하여 즉시적인 data전달과 UI구현이 가능해진다.
4. 유의해야할점
react를 사용한다고해서 무조건 hook을 통해 logic을 구현하는 것이 좋은 건 아니다.
기본적으로 react는 UI의 component적인 구성이 필요하고,
이 구성을 하면서 언제 hook을 사용하는 것이 좋은가를 고민해봐야 한다.
상황에 맞게, 적절하게 hook을 사용해가면서 component UI구현을 하는 것이 바람직하다.
5. 참조링크
React 공식문서 Desgin patterns
https://ko.reactjs.org/docs/design-principles.html
https://ko.reactjs.org/tutorial/tutorial.html
