React anti-pattern

Medium 사이트 번역 + 제가 이해한 내용입니다. 

내용 중에 틀린 부분이 있을 수 있으니 첨부드린 본문을 위주로 읽어주시기 바랍니다. (본문에는 10가지의 상황이 나옵니다. 근데 제가 잘 모르는 부분만 발췌하여 번역한 점, 양해 부탁드리겠습니다.)

 

 

React anti-pattern이란 react를 사용하면서 피해야 하는 사항들입니다. 

 

1. Props drilling

: 부모 컴포넌트에서 자식 컴포넌트로 state를 전달하는 과정인 그 중간 단계를 가리키는 말

->  이를 해결하기 위한 방법은 redux, context api가 있다 -> 이 둘은 state를 외부에서 관리할 수 있게 해주는 것임. 그래서 state상에 문제가 발생했을 때, 그 발생된 컴포넌트를 찾아 헤매이지 않고 모아놓은 파일만 보면 문제를 해결할 수 있음

 

2.Props Plowing

 Props drilling이 vertical problem 즉 컴포넌트 계층 깊이와 관련된 문제라면 Props Plowing은 horizontal problem을 일컫는 말입니다. 

이는 많은 props를 받게 되어 코드가 장황하고 반복적으로 작성되는 경우에 생기는 문제입니다.

-> 이때는 […props] -> spread operators를 사용하면 좋습니다. 

 

3. Component Nesting

컴포넌트 중첩이며, 이 문제는 부모 컴포넌트가 렌더되면 자식 컴포넌트도 덩달아 렌더되면서 많은 메모리 사용을 야기 시킵니다. 

이를 해결할 수 있는 방법은 자식 컴포넌트를 정의하지 않거나 부모 컴포넌트 밖으로 이동시키고 함수를 props로 전달하면 된다고 합니다…

음.. 아직 좀 어려운 내용인 거 같은데, 

 

4. 무거운 작업

예로, state가 변경될 때마다 불필요하게 재 렌더링되면 병목현상이 발생할 수 있습니다. 이 땐, useMemo hook을 사용해서 마지막 값을 저장하게 해야합니다. 

 

5. 무분별한 <div>

react에는 하나의 root요소만 반환할 수 있습니다. 그래서 여러 형제를 반환하려고 하면 문제가 생깁니다. 이 때, 주로 < div>를 사용하려고 하는데 이 보다는 <></>를 사용하여 무분별한 <div>사용을 줄여야합니다. 

 <></>를 사용하면 dom에서 렌더링되지 않는다고 합니다. 

 

예) 

const MyComponent = () => {

  return (

    <div>

      <h1>Title</h1>. —> 형제 1. 

      <p>Paragraph</p> —> 형제 2

    </div>

  );

};

 

 

5번이 가장 찔리네요..

정말.. 무분별한 <div>를 날렸는데... 

미안하네요... pj..