React의 useEffect와 조건부 렌더링 완전 정복!

 

안녕하세요! 이번 글에서는 React에서 상태가 바뀔 때마다 어떤 작업을 처리해주는 useEffect 훅과
상황에 따라 화면을 다르게 보여주는 조건부 렌더링에 대해 알아보겠습니다.

---

useEffect란?

useEffect는 React 컴포넌트가 렌더링된 이후에 특정 작업을 수행할 수 있도록 해주는 훅입니다.
예를 들어, API 호출, 콘솔 로그 출력, 타이머 설정 등 컴포넌트가 화면에 나타난 후 실행되는 로직을 넣을 때 사용합니다.

기본 사용법

import { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('컴포넌트가 렌더링되었습니다. 현재 count:', count);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

• 렌더링마다 실행: 위처럼 작성하면 컴포넌트가 렌더링될 때마다 useEffect가 실행됩니다.

특정 상태 변경에만 실행하기

useEffect(() => {
  console.log('count 값이 바뀔 때만 실행됩니다.');
}, [count]);

두 번째 인자로 [count] 배열을 넣으면 count가 바뀔 때만 실행됩니다.
여러 상태를 감시하려면 [a, b, c] 형태로 넣을 수 있습니다.

한 번만 실행 (컴포넌트 마운트 시)

useEffect(() => {
  console.log('처음 한 번만 실행됩니다.');
}, []);

빈 배열을 넣으면 컴포넌트가 처음 나타날 때 한 번만 실행됩니다. API 요청을 이곳에 넣기도 합니다.

---

조건부 렌더링이란?

조건부 렌더링이란 특정 조건에 따라 보여줄 컴포넌트를 다르게 설정하는 방법입니다.
JavaScript의 if, 삼항 연산자, 논리 연산자 등을 활용합니다.

예제: 로그인 여부에 따라 다른 화면 보여주기

function Welcome({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>환영합니다!</p>
      ) : (
        <p>로그인 해주세요.</p>
      )}
    </div>
  );
}

간단한 논리 연산자 사용

{isLoggedIn && <p>유저 전용 메뉴</p>}

&& 연산자를 쓰면 true일 때만 해당 요소를 렌더링할 수 있습니다.

컴포넌트 자체를 조건부로 렌더링

function App() {
  const [visible, setVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setVisible(!visible)}>
        {visible ? '숨기기' : '보이기'}
      </button>
      {visible && <p>이 문장은 조건에 따라 보입니다.</p>}
    </div>
  );
}

---

마무리

useEffect는 컴포넌트의 생명주기를 따라 특정 작업을 실행할 때 사용하며,
조건부 렌더링은 상황에 따라 보여줄 내용을 제어할 수 있어 매우 자주 쓰이는 기술입니다.