[FE] React - (3)

1. 리액트 Hooks의 장점은?

Key Ponint 💡 Hook의 장점은 로직의 재사용이 가능하고 관리가 쉽다.

• 함수 안에서 다른 함수를 호출하는 것으로 새로운 hook을 만들어 볼 수 있다.
• 기존의 class component는 여러 단계의 상속으로 전반적으로 복잡성과 오류 가능성을 증가시켰다.
• 하지만, function component에 hooks에 도입되면서 class component가 가지고 있는 기능을 모두 사용할 수 있음은 물론이고, 기존 class component 복잡성, 재사용성의 단점을 해결할 수 있다.

2. class component와 function component의 차이

Key Ponint 💡 라이프 사이클의 차이

• class Component는 여러 단계의 상속으로 이루어져 있습니다.
• 그리하여 복잡성과 오류 가능성을 증가 시켰습니다.
• 이로 인해 Function Component가 탄생하게 되었다.
• class component는 라이프 사이클을 가지며 이로인해 각각 생명주기 메소드에 대해 알고 있어야 합니다.
• 하지만 function component는 이러한 기능을 hook을 사용하여 생명주기에 원하는 동작을 하게 합니다.

3. Props Drilling이란?

Key Ponint 💡 하위 컴포넌트가 깊어질때 발생한다.

• 리액트의 컴포넌트 트리에서 데이터를 전달하기 위해서 필요한 과정을 의미한다.
• 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때, 자식 컴포넌트의 단계가 깊어질 수 록 Props Drilling의 문제가 발생한다.
• 데이터를 관리하기 어려워지게 된다. 그렇기 때문에 전역데이터를 사용할 필요가 생기게 되었고,
  여러 라이브러리가 생기게 되었다.
• context, redux, recoil mobx 등이 있다.

4. forwardRef는?

Key Ponint 💡 하위 컴포넌트로 useRef를 전달하기 위해서 사용된다.
하위 컴포넌트를 forewardRef로 감싸준뒤, props, ref 와 같이 useRef를 받을 수 있게 된다.

5. 고차 컴포넌트

Key Ponint 💡 고차 컴포넌트(HOC, Higher Order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술이다.

• 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수로, 컴포넌트를 인자로 받거나 반환한다.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

1) 고차 컴포넌트를 사용하는 이유?

리액트 공식문서에서는 횡단 관심사(Cross-Cutting Concerns) 문제를 해결하는 데 쓰인다고 언급이 되어 있다.

6. 고차 컴포넌트(HOC) vs 훅(Hooks)

공식 문서에서는 대부분의 경우 Hooks로 대체 가능하다고 말합니다.

클래스 컴포넌트로만 개발해야 했을 때, 주로 고차 컴포넌트는 생명주기에 종속적이지 않으면서 중복된 코드를 분리하기 위해서 사용했습니다. 그러다보니 HOC가 반환하는 중복되는 컴포넌트 레이어들이 쌓이는 문제가 발생했습니다.

하지만 Hooks가 릴리즈되면서 생명주기가 단순화 되었고, 공통의 코드 분리가 필요한 경우에는 custom hook을 사용하면 해결 할 수 있게 되었습니다. custom hooks를 사용하면 컴포넌트가 중첩 되지 않아서 hoc에서 발생했던 문제를 해결 할 수 있습니다.

더 구체적으로 정리해보자면,

5. Apollo

Key Ponint 💡 REST API를 사용하여 리소스으 ㅣ크기가 서버에서 결정되는 문제를 해결하고자 서버에서 어떤 자원을 사용할 수 있는지를 정의하고, 클라이언트에서 랜더링이 필요한 데이터를 요청하는 방식이다.