조건부 렌더링

혜얌·2024년 6월 3일

React

목록 보기

5/9

리액트의 조건부 렌더링

리액트에서 조건부 렌더링은 UI를 동적으로 업데이트하는 중요한 방법이다. 조건부 렌더링을 통해 사용자의 상태나 특정 조건에 따라 다른 컴포넌트를 보여줄 수 있다. 리액트는 JavaScript의 조건문을 사용하여 이 기능을 구현할 수 있다.

조건부 렌더링 구현 방법

if 문 사용

if 문을 사용하여 조건에 따라 다른 컴포넌트를 렌더링할 수 있다.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

조건부 연산자 (삼항 연산자) 사용

삼항 연산자를 사용하여 더 간결하게 조건부 렌더링을 할 수 있다.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <h1>{isLoggedIn ? 'Welcome back!' : 'Please sign up.'}</h1>
  );
}

논리 && 연산자 사용

논리 && 연산자를 사용하여 조건이 참일 때만 렌더링할 수 있다.

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

컴포넌트 변수 사용

조건에 따라 렌더링할 컴포넌트를 변수에 저장할 수 있다.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  let message;

  if (isLoggedIn) {
    message = <h1>Welcome back!</h1>;
  } else {
    message = <h1>Please sign up.</h1>;
  }

  return (
    <div>{message}</div>
  );
}

함수형 컴포넌트와 화살표 함수

리액트에서는 함수형 컴포넌트를 많이 사용한다. 함수형 컴포넌트는 간단한 JavaScript 함수로, 상태 관리와 생명주기 메서드를 추가하기 위해 훅(Hooks)을 사용할 수 있다. 화살표 함수는 더 간결한 문법으로 함수형 컴포넌트를 정의할 수 있게 해준다.

리액트 16.8 이전에서는 함수형 컴포넌트에서는 상태를 관리 할 수 없었다.
16.8에서 hooks라는 개념이 도입되며 함수형 컴포넌트에서 상태 관리가 가능하게 되었다.

함수형 컴포넌트 예제

function Greeting(props) {
  return <h1>{props.message}</h1>;
}

화살표 함수 예제

const Greeting = (props) => {
  return <h1>{props.message}</h1>;
}

상태 업데이트 함수

상태를 관리하기 위해 useState 훅을 사용한다. useState는 상태 변수와 상태를 업데이트하는 함수를 반환한다. 상태 업데이트 함수는 새로운 상태를 인자로 받아 상태를 업데이트한다.

상태 업데이트 함수 예제

import React, { useState } from 'react';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {isLoggedIn ? (
        <button onClick={handleLogout}>Logout</button>
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
    </div>
  );
}

const Greeting = (props) => {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}

export default App;

위 예제에서는 사용자의 로그인 상태를 관리하기 위해 useState 훅을 사용하였다. 로그인 상태에 따라 다른 메시지와 버튼을 렌더링한다.

함수형 업데이트 vs 기본적인 useState 렌더링

기본적인 useState

기본적인 useState를 사용하면 새로운 상태를 업데이트하는 데 이전 상태를 직접 참조할 수 없다. 대신 현재 상태의 값을 새로운 값으로 간단히 설정할 수 있다. 예를 들어, setCount(count + 1)과 같은 형태로 사용된다.

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1); // 기본적인 useState를 사용한 업데이트
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

함수형 업데이트를 사용한 useState

함수형 업데이트를 사용하면 이전 상태를 직접 참조하여 새로운 상태를 계산할 수 있다. 이전 상태를 안전하게 보존하고 새로운 상태를 업데이트하는 데 필요한 최신 값을 보장할 수 있다. 이는 복잡한 로직이나 여러 번의 연속된 상태 업데이트가 필요한 경우 특히 유용하다.

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(prevCount => prevCount + 1); // 함수형 업데이트를 사용한 업데이트
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

비교 및 분석

안전성: 함수형 업데이트를 사용하면 이전 상태를 안전하게 보존할 수 있다. 이전 상태를 직접 참조하기 때문에 다른 업데이트가 중첩되거나 변경 사항이 충돌하는 상황을 방지할 수 있다.

성능: 함수형 업데이트는 React가 내부적으로 최적화를 수행하여 더 나은 성능을 제공할 수 있다. 이전 상태를 직접 참조하므로 React가 상태를 업데이트하는 방식을 더 잘 이해하고 최적화할 수 있다.

가독성: 함수형 업데이트는 상태 업데이트에 대한 의도를 더 명확하게 전달할 수 있다. 코드가 더 직관적이고 가독성이 향상된다.

복잡성 처리: 복잡한 상태 업데이트 논리가 있는 경우 함수형 업데이트가 더 용이하다. 여러 조건문이나 중첩된 로직이 있는 경우 이전 상태를 직접 참조하여 더 쉽게 처리할 수 있다.

결론적으로, 기본적인 useState는 단순한 상태 업데이트에 유용하고 간단한 로직에 적합하며, 함수형 업데이트는 복잡한 상태 업데이트나 더 높은 안전성과 성능이 필요한 경우에 유용하다.

가장 큰 특징은 setState는 비동기 라는 것이다.

export default function App() {
  const [value, setValue] =  useState(0)

  const onClick = () => {
    setValue(value+1)
    setValue(value+1)
    setValue(value+1)
  }
  
  return (
    <div className="App">
      <button onClick={onClick}>+</button>
      <h1>{value}</h1>
    </div>
  );
}

다음과 같은 코드를 실행하면 결과는 3이 아닌 1이 나온다.
이유는 seeState는 비동기이기에 리액트가 효율적으로 렌더링하기 위해 여러 개의 상태 값 변경 요청을 batch(일괄 처리) 처리하기 때문이다.

따라서 setState를 동기적으로 사용하기 위해서는 함수형 업데이트를 사용하면 된다.

export default function App() {
  const [value, setValue] =  useState(0)

  const onClick = () => {
    setValue(prev => prev+1)
    setValue(prev => prev+1)
    setValue(prev => prev+1)
  }
  
  return (
    <div className="App">
      <button onClick={onClick}>+</button>
      <h1>{value}</h1>
    </div>
  );
}

이 코드의 결과는 3이다.

그렇담 2개의 state를 만든 후 함수형 업데이트로 상태변화를 한다면 어떻게 될까?
export default function App() {
  const [valueX, setValueX] =  useState(0)
  const [valueY, setValueY] =  useState(0)
  const onClick = (e) => {
    setValueX(prev => prev + 1);
    setValueX(prev => prev + 1);
    setValueY(valueX + 1)
  }
  return (
    <div className="App"  >
      <button onClick={onClick}>+</button>
      <h1>valueX : {valueX}</h1>
      <h1>valueY : {valueY}</h1>
    </div>
  );
}
이 예제에서 Y는 과연 무슨 값이 나올까?
정답은 1이다. Y 는 업데이트된 X의 값이 아닌 X의 이번 렌더링 초깃값을 사용하게 사용함을 의미한다.