[React] React 기본 개념 이해 [2/2]

JINJIN·2023년 5월 25일

React

목록 보기

4/10

React를 본격적으로 알아보기 전에 기본 개념부터 알고 갑시다!

✨ 들어가기 전에...

- React 기본 개념 이해 [1/2]

저번 포스팅에서는 리액트의 핵심 개념 중 컴포넌트(구성 요소)와 JSX 구문에 대해서 자세히 알아보았습니다!

이번 시간에는 리액트에서 자주 사용하는 기능과 Hooks에 대해서 자세히 알아보겠습니다!

🔍 조건부 렌더링

리액트에서 조건부 렌더링은 특정 조건에 따라 다른 컴포넌트를 렌더링하는 방법을 말합니다.
이는 JavaScript의 조건문을 사용하여 구현할 수 있습니다.

If-Else 조건문

리액트 JSX 내부에서는 if-else 문을 직접 사용할 수 없습니다.
따라서 if-else 조건문을 사용하려면, JSX 외부에서 이를 사용해야 합니다.

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>어서오세요!</h1>;
  } else {
    return <h1>로그인을 해주세요.</h1>;
  }
}

삼항 연산자 (조건 ? 참 : 거짓)

삼항 연산자는 JSX 내부에서도 사용할 수 있습니다.
이는 간결한 조건부 렌더링을 가능하게 합니다.

function Greeting({ isLoggedIn }) {
  return (
    <h1>
      {isLoggedIn ? '어서오세요!' : '로그인을 해주세요.'}
    </h1>
  );
}

논리 연산자 (&&)

논리 연산자를 사용하면, 조건이 참일 때만 특정 JSX를 렌더링할 수 있습니다.

function Greeting ({ isLoggedIn }) {
  return (
    <h1>
      {isLoggedIn && '어서오세요!'}
    </h1>
  );
}

🔍 배열 렌더링

리액트에서는 배열(리스트)를 렌더링할 때 자바스크립트의 for 루프나 배열의 map() 함수 같은 기능을 자주 사용합니다.

예를 들어, 아래와 같이 제품 배열이 있다고 가정해 봅시다!

const products = [
  { title: '배추', id: 1},
  { title: '마늘', id: 2},
  { title: '사과', id: 3},
];

이제 이 배열을 map() 함수를 이용해서 각 제품을 <li> 아이템으로 바꾸는 작업을 할 수 있습니다.

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

위 코드에서 주목해야 할 부분은 <li> 태그에 key 속성이 있다는 점입니다.
리스트의 각 아이템에는 그 아이템을 형제들 사이에서 유일하게 식별할 수 있는 문자열이나 숫자를 key로 넘겨주어야 합니다.
대부분의 경우, key는 데이터베이스 ID와 같은 데이터에서 가져오는 것이 좋습니다.

리액트는 이 key를 이용해 나중에 아이템을 삽입, 삭제, 또는 재정렬 했을 때 무슨 일이 발생했는지 알 수 있습니다.
이렇게 하면 리액트가 변경사항을 효과적으로 감지하고 UI를 업데이트 할 수 있습니다. 따라서, 리스트를 렌더링 할 때는 각 요소에 고유한 key를 지정하는 것이 중요합니다.

🔍 이벤트 핸들러

리액트에서는 이벤트를 처리하기 위해 이벤트 핸들러 함수를 선언하여 사용합니다.
이벤트 핸들러란 특정 이벤트가 발생했을 때 호출되는 함수를 말하는데요.

예를 들어, 사용자가 버튼을 클릭했을 때 어떤 동작을 하도록 만들고 싶다면, 다음과 같이 이벤트 핸들러 함수를 선언하고 이를 해당 이벤트에 연결하면 됩니다.

function MyButton() {
  function handleClick() {
    alert('클릭했습니다!');
  }

  return (
    <button onClick={handleClick}>
      클릭해주세요
    </button>
  );
}

위의 코드에서 handleClick이라는 함수는 이벤트 핸들러로서, 버튼 클릭 시 해당 함수가 호출됩니다.

이때 주의할 점은, onClick={handleClick}에서 handleClick 함수를 호출하지 않는다는 점입니다.
즉, onClick={handleClick()}처럼 괄호를 사용하여 함수를 바로 호출하지 않습니다. 단지 함수를 참조만 해주는 것입니다.

왜냐하면 이벤트 핸들러 함수를 직접 호출하면 컴포넌트가 렌더링될 때마다 함수가 실행되기 때문에, 이벤트 발생 여부와 상관없이 항상 실행되어 버립니다.

따라서 함수 이름만 넣어 이벤트 발생 시 리액트가 해당 함수를 호출하도록 하는 것이 바람직합니다.
이렇게 하면 사용자가 실제로 버튼을 클릭했을 때만 handleClick 함수가 실행되게 됩니다.

🔍 훅(Hooks) 사용

함수 이름이 use로 시작하는 것들을 Hooks라고 부릅니다.
useState는 리액트가 제공하는 내장 Hook입니다.
API 참조에서 다른 내장 Hooks도 찾아볼 수 있습니다.
또한 기존의 Hooks를 조합하여 자신만의 Hooks를 작성할 수도 있습니다.

Hooks는 다른 함수들보다 제한적입니다.
Hooks는 컴포넌트(또는 다른 Hooks)의 최상위에서만 호출할 수 있습니다.
만약 useState를 조건문이나 반복문에서 사용하고 싶다면, 새로운 컴포넌트를 추출하고 그곳에 배치해야 합니다.

참고로 Hooks는 함수형 컴포넌트에서만 사용할 수 있으며, 클래스 컴포넌트에서는 사용할 수 없습니다!

또한 리액트는 여러 종류의 내장 Hooks를 제공하며, 각각은 다양한 목적으로 사용됩니다.
예를 들어, useState는 컴포넌트 내부 상태를 관리하고, useEffect는 컴포넌트의 생명주기를 관리하며, useContext는 컴포넌트의 컨텍스트를 다루는 데 사용됩니다.

이런 Hooks를 잘 이해하고 사용하는 것은 리액트를 효과적으로 사용하는 데 매우 중요합니다. 따라서 각각의 Hook이 어떤 목적으로, 어떻게 사용되는지 잘 이해하는 것이 중요합니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>{count} 번 클릭하였습니다!</p>
      <button onClick={() => setCount(count + 1)}>
        클릭해주세요
      </button>
    </div>
  );
};