React Tip

---

💡 React 실전 팁

정의

React 팁은 실제 컴포넌트를 작성할 때 자주 놓치기 쉬운 구현 습관과 패턴을 정리한 내용이다.

🧩 리스트 렌더링

• 배열을 화면에 뿌릴 때는 map을 사용한다.
• key 값은 반드시 고유해야 한다.
• 여러 요소를 한 번에 묶어 반환할 때는 Fragment를 사용한다.

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

🛠️ 조건부 표시

• 간단한 분기는 삼항 연산자나 &&를 사용한다.
• 길고 복잡한 조건은 변수로 분리하면 읽기 쉽다.

{hideCompleted && <p>완료 항목 숨김</p>}

const content = isActive ? <div>짠</div> : <div>안보임</div>;

🔁 배열 다루기

• 상태 배열은 직접 수정하지 말고 복사해서 처리한다.
• 스프레드 문법을 사용하면 새로운 배열을 만들기 쉽다.

const copy = [...items];

🧱 컴포넌트 분리

• UI가 커지면 역할별로 컴포넌트를 나눈다.
• props가 너무 많아지면 구조를 다시 점검한다.
• 재사용할 수 있는 부분은 미리 분리해두면 좋다.

⚠️ 주의할 점

• JSX 안에 로직을 너무 많이 넣지 않는다.
• 반복 렌더링에서 key를 빼먹지 않는다.
• 상태를 직접 수정하지 않는다.
• 불필요한 wrapper div를 남발하지 않는다.

📌 정리

• React 팁은 코드 가독성과 유지보수를 높이는 데 도움이 된다.
• 리스트 렌더링, 조건부 표시, 배열 처리, 컴포넌트 분리를 먼저 챙기면 된다.
• React-Component, React-JSX, React-Fragment, React-Syntax와 함께 보면 좋다.

---

연결문서

• React-Component
• React-JSX
• React-Fragment
• React-Syntax
• React-Keyword
• React-Props