Seop_E [Frontend Study]

JavaScript / React - IntersectionObserver

섭이님 — Fri, 28 Mar 2025 18:48:41 +0900

IntersectionObserver는 웹 개발에서 아주 유용한 API 이다.

이 API는 특정 요소(target)가 뷰포트나 지정한 컨테이너와 교차하는 정도를

비동기적으로 감지할 수 있게 해준다.

즉 스크롤할 때 요소가 화면에 나타나거나 사라지는 시점을 효율적으로 파악할 수 있도록 해준다.

IntersectionObserver를 사용하는 이유

성능 최적화
- 스크롤 이벤트를 직접 감시하는 방식은 매번 스크롤 이벤트가 발생할때마다
많은 연산을 해야하기 때문에 성능 이슈가 발생할 수 있다.
IntersectionObsever는 브라우저가 최적화한 방식으로 감지하므로 성능 부담이 적다는 장점이 있다.
간편한 API
- 요소가 화면에 들어왔는지 여부를 쉽게 감지할 수 있어, lazy loading (이미지나 리소스의 지연 로딩) 또는
애니메이션 트리거 등에 유용하게 사용할 수 있다.

동작원리

관찰 대상 설정 : 개발자는 감시하고 싶은 요소 (ex: img, section 등)를 선택한다.
교차 상태 감지 : 브라우저는 이 요소가 뷰포트 또는 특정 부모 컨테이너와 얼마나 교차(intersect)하는지를 감지한다.
비동기 콜백 (async & await callback) 실행 : 요소가 설정한 기준 (ex: 일정 비율 이상 보임) 에 도달하면
미리 지정한 콜백 함수가 호출된다.
이 콜백 함수에서는 요소가 보이기 시작했을 때 필요한 작업 (ex: animation 실행, lazy loading등)을 수행할 수 있다.

특정 스크롤 위치에 도달하면 등장할때 애니메이션 실행하는 예제

주요 옵션 및 속성

▼ threshold

0부터 1사이의 숫자 또는 숫자 배열로, 요소가 어느 정도 보였을 때 콜백을 실행할지를 결정한다.
예를 들어 threshold가 0.5라면, 해당 요소의 50% 이상이 뷰표트에 들어왔을 때 콜백 함수가 호출된다.

▼ root

기본값은 브라우저의 뷰포트이다.
만약 특정 컨테이너 내에서 교차 여부를 감지하고 싶다면, 해당 컨테이너 요소를 root로 지정할 수 있다.

▼ rootMargin

뷰포트의 경계를 확장하거나 축소할 수 있는 마진을 설정한다.
예를 들어 '0px 0px -100px 0px'와 같이 설정하면 뷰포트 하단에서 100px 만큼 여유를 두어
그 영역에 들어올 때 콜백을 실행할 수 있다.
이는 요소가 실제로 완전이 보이기 전에 미리 작업을 시작할 수 있게 도와준다.

// 사용 예제

{
  // thershold: 요소가 보이는 비율을 설정
  threshold: 0.5, // 이 값을 높이면 요소가 일정 비율 이상 보일 때까지 애니메이션이 실행되지 않음

  // rootMargin: 뷰포트 경계에 대해 추가적인 마진을 설정
  rootMargin: '0px 0px -100px 0px', // 음수 값을 늘리면 요소가 뷰포트에 들어오기 전에 애니메이션을 늦출 수 있음
}

IntersectionObserverEntry 객체

콜백 함수는 IntersectionObserver 객체를 배열 형태로 전달받는다.

이 객체에는 다음과 같은 중요한 속성들이 있다.

isIntersecting: 요소가 현재 교차 상태인지 (true/false)
intersectionRatio: 요소가 뷰포트와 얼마나 곂치는지를 나타내는 비율 (0~1)
target: 감시 중인 실제 DOM 요소
boundingClientRect, intersectionRect, rootBounds: 요소와 뷰포트의 위치와 크기에 대한 정보를 제공

// IntersectionObserver객체 및 옵션 사용 예제

import { useEffect, useRef } from 'react';

// useScrollReveal custom hook - 요소가 뷰포트에 일정 비율 이상이 보이면 'fade-in' 클래스를 추가.
const useScrollReveal = (threshold = 0.1) => {
  // threshold 매개변수는 기본값이 0.1 (요소가 10% 보이면 애니메이션 효과를 트리거)
  const elementRef = useRef(null); // 관찰할 요소에 대한 참조를 생성

  useEffect(() => {
    const element = elementRef.current; // 실제 DOM 요소에 접근
    if (!element) return; // 요소가 없으면 진행 X

    // IntersectionObserver 생성
    const observer = new IntersectionObserver(
      ([entry]) => {
        // entry.inIntersectiong이 true이면 요소가 뷰포트 내에 일정 비율 이상 보임
        if (entry.isIntersecting) {
          entry.target.classList.add('fade-in'); // fade-in 클래스 추가
          observer.unobserve(entry.target); // 한번 애니메이션이 실행되면 중지
        }
      },

      {
        // thershold: 요소가 보이는 비율을 설정
        threshold: 0.5, // 이 값을 높이면 요소가 일정 비율 이상 보일 때까지 애니메이션이 실행되지 않음

        // rootMargin: 뷰포트 경계에 대해 추가적인 마진을 설정
        rootMargin: '0px 0px -100px 0px', // 음수 값을 늘리면 요소가 뷰포트에 들어오기 전에 애니메이션을 늦출 수 있음
      }
    );

    observer.observe(element); // oberver를 이용해 실제 DOM 요소를 감시하기 시작.

    // 컴포넌트가 언마운트될 때 옵저버를 해제하여 메모리 누수 방지
    return () => observer.disconnect();
  }, [threshold]); // threshold 값이 변경되면 재실행
  // 관찰할 DOM 요소의 ref를 반환하고 이 ref를 각 컴포넌트의 ref 속성에 할당하면,
  // 해당 요소가 IntersectionObsever에 의해 감시됨.
  return elementRef;
};

export default useScrollReveal;

실무 적용

src/
├── components/
│   ├── OOO.jsx
├── hooks/
│   └── useScrollReveal.js
├── App.jsx
├── main.jsx
└── index.css

실제로 리액트 같은 프레임워크에서 IntersectionObserver를 사용할 때는

커스텀 훅 (useScrollReveal) 등을 만들어 각 컴포넌트에 쉽게 적용할 수 있다.

각 섹션이나 컴포넌트의 초기 CSS 상태를 opacity-0 또는 transform translate-y-10과 같이 설정해두고
InterSectionObserver가 감지되면 fade-in 클래스를 추가하여 애니메이션을 적용한다.

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
}

.dark {
  color-scheme: dark;
}

/* IntersectionObserver 초기 CSS 상태 - fade-in 클래스 적용*/

.fade-in { 
  opacity: 1 !important;
  transform: translateY(0) !important;
}

이 방법으로 lazy loading, 애니메이션 트리거, 인피니트 스크롤등 다양한 기능을 손쉽게 구현할 수 있다.

이와 같이 IntersectionObserver는 웹 페이지의 성능 최적화와 사용자 경험 향상에 매우 유용한 도구이다.

실제 적용 시에는 프로젝트의 요구사항에 맞게 threshold, rootMargin등 옵션을 조절하여

최적의 타이밍에 원하는 효과를 낼 수 있도록 설정할 수 있다.

React - useRef

섭이님 — Wed, 12 Mar 2025 21:27:18 +0900

useRef는 리액트의 훅(Hook)중 하나로

변수를 유지하지만 컴포넌트가 리렌더링될 때 값이 초기화되지 않도록 하는 역할을 한다.

const fileInputRef = useRef(null);

// handleImageChange 생략

<input type="file" ref={fileInputRef} name="image" accept="image/*" multiple onChange={handleImageChange} style={{ display: 'none' }} />
<button type="button" onClick={() => fileInputRef.current && fileInputRef.current.click()}>
  파일 선택
</button>

위 코드에서 useRef는 fileInputRef를 생성하고

<input type = "file" /> 요소의 참조 (reference) 역할을 한다.

즉, fileInputRef.current에는 해당 <input> 요소가 직접 저장된다.

const fileInputRef = useRef(null);

▲ fileInputRef라는 변수를 useRef(null)로 초기화하고

이 변수는 렌더링이 다시 일어나도 값이 유지된다.

<input
   type="file"
   ref={fileInputRef}
   name="image"
   accept="image/*"
   multiple
   onChange={handleImageChange}
   style={{display:'none'}}
/>

▲ <input> 태그에 ref={fileInputRef}를 설정하여

이 요소를 직접 참조할 수 있도록 만든다.

<button 
   type="button
   onClick={() => fileInputRef.current && fileInputRef.current.click()}>
파일 선택
</button>

▲ 파일 선택 버튼을 클릭하면 fileInputRef.current.click()이 실행되는데

이는 <input type="file" /> 요소의 click() 메소드를 호출하는 것이다.

즉, 보이지 않는 파일 선택창을 버튼을 눌렀을 때 강제로 열리게 만든다.

currnt? click() 메소드? 보이지않는 파일 선택창을 왜 강제로 열어?

무슨 말인지 이해가 안간다면, 우선 inpu 태그 안에 style={{ display: 'none'}} 코드를 보면된다.

<input type="file" /> 요소는 지금 display none으로 숨겨져있는데

즉 사용자는 보이지 않는 input을 직접 클릭할 수 없다.

하지만 button을 클릭하면 fileInputRef.current.click()이 실행되면서

파일 업로드 창이 나타난다. 그이유는 click() 메소드 때문이다.

※ click() 메소드 - HTML 요소를 프로그래밍적으로 클릭하는 메소드
=> 일반적으로 버튼을 클릭하면 그 버튼에 연결된 onClick 이벤트가 실행되는데
자바스크립트에서 element.click()을 호출하면
실제 클릭하지 않아도 해당 요소를 클릭한 것과 같은 효과를 줄 수 있다.
만약 click() 메소드가 없다면 버튼을 클릭해도 아무일도 일어나지 않을 것이다.
왜냐하면 파일 선택창을 여는 것은 <input type="file" />이 클릭될 때만 가능하기 때문이며
즉 click()을 사용해서 직접 보이지 않는 <input>을 클릭하도록 속여,
display none으로 숨겨진 input을 대신 클릭하는 방식이 필요하기에 사용한다.

하지만 중요한건 current

current는 무엇이며 useRef의 기본 프로퍼티인가 싶을텐데

그 생각이 맞다. current는 useRef가 반환하는 객체의 정해진 프로퍼티이다.

const fileInputRef = useRef(null);

▲ useRef를 호출하면 { current : 초기값 } 형태의 객체를 반환하며

위 코드에서는 { current :null }이 저장된다.

만약 <input>에 ref를 연결하면

current 값이 해당 DOM 요소로 업데이트된다. ▼

<input type="file" ref={fileInputRef} />

이후 fileInputRef.current를 확인해보면,

console.log(fileInputRef.current)

// <input type="file"> 요소가 출력됨

즉, current는 useRef가 제공하는 고정된 프로퍼티로,

해당 ref가 가리키는 값을 저장하는 역할을 한다.

current는 직접 수정할 수도 있다?

useRef는 일반적인 상태(state) 처럼 동작하지 않는다.

current 값을 직접 변경해도 컴포넌트가 다시 렌더링되지 않는다.

fileInputRef.current = "Hello";
console.log(fileInputRef.current); // "Hello"

이처럼 current는 그냥 객체의 속성처럼 자유롭게 수정할 수 있는 값이다.

정리하자면.. useRef는 컴포넌트가 다시 렌더링되더라도 유지해야하지만

화면에 영향을 주지 않는 값을 저장할 때사용된다.

위 파일 등록하는 로직에서의 useRef는

파일 선택을 클릭하면 fileInputRef.current.click()이 실행되어

파일 선택창이 열릴때 사용자가 파일을 선택하면 <input type="file">의 onChange 이벤트가 발생하여

선택한 파일이 처리되고 이 과정에서 컴포넌트는 리렌더링이 되지 않기에 useRef를 사용하는 것이다.

만약에 useState를 사용했다면?

const [selectedFile, setSelectedFile] = useState(null);

const handleImageChange = (event) => {
  setSelectedFile(event.target.files[0]); // 선택한 파일을 상태로 저장
};

<input type="file" onChange={handleImageChange} />

위와같이 useState를 사용했다면 setSelectedFile이 실행되면

컴포넌트가 리렌더링이 되어 상태가 업데이트 되면서 화면이 다시 그려지게되므로

파일을 업로드할 수 없게된다.

그러므로 useRef를 사용하면 current에 파일 정보를 저장할 수 있어서

리렌더링 없이 파일을 선택하고 업로드 할 수 있는 것이다.

React, JavaScript - 타임스탬프 날짜 변환

섭이님 — Tue, 4 Mar 2025 19:53:17 +0900

  {
    "id": 1,
    "title": "결백",
    "imgUrl": "",
    "rating": 2,
    "content": "유명 로펌의 에이스 변호사 ‘정인(신혜선)’은 아빠의 장례식장에서 농약 막걸리 살인사건이 일어났음을 알게 된다. 치매에 걸린 엄마 ‘화자(배종옥)’가 용의자로 지목되고, 그녀의 결백을 주장하기 위해 고향으로 내려가 직접 변호를 맡는다. 사건을 추적하던 중 시장 ‘추인회(허준호)’를 중심으로 한 마을 사람들의 조직적 은폐와 거짓 진술 등 수상한 정황을 포착한 ‘정인’. 그날의 기억을 모두 잃은 ‘화자’의 결백을 입증하기 위해 모든 사람들과 맞서기 시작하는데…! 파헤칠수록 커지는 의혹, 과연 진실은 무엇인가?",
    "createdAt": 1591714800000,
    "updatedAt": 1591714800000
  },

function formatDate(value) { // 날짜 포맷 함수
  const date = new Date(value); // value 값으로 Date 객체 생성
  return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 ${date.getHours()}시 ${date.getMinutes()}분 ${date.getSeconds()}초`; // 년, 월, 일, 시, 분, 초 반환
}

function ReviewCard({review}) {
  return(
    <div>
    {/* formatDate 함수를 사용하여 날짜와 시간을 특정 형식으로 포맷 */}
      <p>{formatDate(review.createdAt)}</p>
    </div>
  )
}
export default ReviewCard;

결과

또는 formatDate 함수를 사용하지 않고

다음과 같이 toLocalString을 사용

function ReviewCard({ review }) {
  return (
    <div>
      {/* toLocaleString()을 사용하여 브라우저 로케일에 맞게 날짜와 시간을 포맷 */}
      <p>{new Date(review.createdAt).toLocaleString()}</p>
    </div>
  );
}

export default ReviewCard;

React - 평점 등록하기 (별 5개) 코드

섭이님 — Tue, 4 Mar 2025 15:51:19 +0900

function StarRating( {rating, setRating}) { // rating과 setRating을 props로 전달받음
  return (
    <div>
      {[...Array(5)].map( // map 함수를 사용하여 5개의 별을 생성
        // map 함수의 콜백함수의 인자로 배열의 요소값과 인덱스값을 전달
        (_, index) => ( // 배열의 요소값은 사용하지 않으므로 _로 대체하고 배열의 인덱스 값 사용,
          <span 
          key={index}
          style={{cursor:'pointer', fontSize:'1.5rem', 
            color: index < rating ? 'gold' :'gray'}} // 별의 색상을 rating 값에 따라 gold 또는 gray로 설정
            onClick= {() => setRating (index + 1)} // 별을 클릭하면 setRating 함수를 호출하여 rating 값을 변경
          >
            ★
          </span> 
        )
      )}
    </div>
  );
}
export default StarRating;

import { useState } from 'react';
import StarRating from './StarRating';

function ReviewForm() {
  const [rating, setRating] = useState(0); // 별점

  const handleSubmit = (e) => {
    // 리뷰 등록 이벤트 핸들러
    e.preventDefault(); // 폼의 기본 동작 방지
    console.log({ rating });
  };
  return (
    <form onSubmit={handleSubmit}>
      <StarRating rating={rating} setRating={setRating} />
      <button type="submit">등록</button>
    </form>
  );
}

export default ReviewForm;

▼ 결과

개발 참고 사이트

섭이님 — Mon, 3 Mar 2025 23:50:16 +0900

update : 25/03/03

참고 사이트

온라인 코드 편집기(HTML, CSS, JS)

CodePen: https://codepen.io

React 웹 기반 개발 환경

Codesandbox: https://codesandbox.io
Stackblitz: https://stackblitz.com

바벨 REPL

https://babeljs.io/repl

React 공식 홈페이지

https://ko.react.dev

JSX 변환기 (HTML을 JSX로 변환)

https://transform.tools/html-to-jsx

객체 불변성 라이브러리 immer

https://immerjs.github.io/immer

props의 타입 검증을 위한 PropTypes

https://www.npmjs.com/package/prop-types

Form 입력값 검증을 위한 react-hook-form

https://react-hook-form.com

정규표현식 테스트

https://regexr.com

초보자를 위한 리액트

https://react.vlpt.us

Recoil

https://recoiljs.org/ko

Zustand

https://docs.pmnd.rs/zustand

Redux (한국어)

https://ko.redux.js.org

React Redux

https://react-redux.js.org

Redux Toolkit

https://redux-toolkit.js.org

API Client

Postman

Bruno

홈페이지: https://www.usebruno.com
다운로드: https://www.usebruno.com/downloads
문서: https://docs.usebruno.com/introduction

React- React에서 인라인 스타일 사용하기

섭이님 — Fri, 28 Feb 2025 18:22:12 +0900

리액트에서 컴포넌트 스타일을 적용하는 여러 가지 방법중

인라인 스타일(Inline Style)을 사용하는 방법을 알아보자.

인라인 스타일 (Inline Style)

인라인 스타일은 컴포넌트의 style 속성에 직접 스타일 객체를 전달하는 방식ㅇ이다.

리액트에서는 style 속성에 객체(Object) 형태로 스타일을 적용해야 한다.

원래는 다음과 같이 HTML 방식을 사용했었다.

function InlineStyleExample() {
  return (
    <div>
      {/* HTML 방식 (잘못된 코드*/}
      <h1 style="color:red; font-size:20px">안녕하세요</h1>
    </div>
  )
}

export default InlineStyleExample

하지만 리액트에서는 문자열 (" " 안에 스타일을 작성)로 인라인 스타일을 적용할 수 없다.

결국 다음과 같이 오류가 발생한다.

그렇다면 React 방식 (객체 사용)은 어떤 모습일까?

다음 코드는 객체를 사용하여 스타일을 적용하였다.

function InlineStyleExample() {
  return (
    <div>
      {/* HTML 방식 (잘못된 코드*/}
      {/* <h1 style="color:red; font-size:20px">안녕하세요</h1> */}

      {/* React 방식 (객체 사용) */}
      <h1 style={{ color: "red", fontSize: "20px" }}>안녕하세요</h1>
    </div>
  )
}

export default InlineStyleExample

※ 인라인 스타일을 사용할 때의 주의점

하이픈(-) 대신 카멜 케이스(camelCase)를 사용해야한다.
❌ background-color: "red"
✅ backgroundColor: "red"
문자열 단위(px, %, em등)는 반드시 문자열(" ")로 작성해야한다.
❌ width: 50%
✅ width: "50%"
※ style 객체에서는 기본적으로 숫자 값을 사용하면 자동으로 px 단위 적용됨 - ex) fontSize: 20 -> (20px)
단 % 같은 단위는 반드시 문자열 작성
너무 많은 스타일을 인라인으로 사용하면 유지보수가 어렵다.
-> CSS 파일, CSS Modules, style컴포넌트 등을 고려하는 것이 좋다

다음과 같이 위 사항들을 고려하여 작성된 인라인 스타일을 적용한다.

function InlineStyleExample2() {
  return (
    <div>
      <h2 style={{ color: "blue", fontSize: '24px', fontWeight: "bold" }}>
        인라인 스타일 적용 예제
      </h2>
      <button style={{ backgroundColor: "black", color: "white", padding: "10px" }}>
        버튼
      </button>
    </div>
  )
}

export default InlineStyleExample2

스타일 객체를 변수로 따로 분리해서 사용하기

컴포넌트 안에서 style 객체를 변수로 따로 선언해서 사용할 수도 있다.

function InlineStyleWithObject() {

  const titleStyle = {
    color: "purple",
    fontSize: "26px",
    textAligin: "center",
  }

  const buttonStyle = {
    backgroundColor: "green",
    color: "white",
    padding: "10px, 20px",
    borderRadius: "5px",
    border: "none",
    cursor: "pointer"
  }
  return (
    <div>
      <h2 style={titleStyle}>스타일 객체로 적용하기</h2>
      <button style={buttonStyle}>스타일 적용된 버튼</button>
    </div>
  )
}
export default InlineStyleWithObject

이 방식을 사용하면 코드를 재사용하기 편리하다.

동적으로 스타일 변경하기 - useState

useState를 사용하여 버튼을 클릭하면

색상이 변경되는 스타일을 적용할 수도 있다.

import { useState } from "react"

function DynamicStyle() {
  const [clicked, setClicked] = useState(0);

  const boxStyle = {
    width: "200px",
    height: "100px",
    backgroundColor: clicked ? "orange" : "grey",
    color: "white",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "20px",
    cursor: "pointer",
  }
  return (
    <>
      <div style={boxStyle} onClick={() => setClicked(!clicked)}>
        {clicked ? "클릭됨" : "클릭하세요"}
      </div>
    </>
  )
}

export default DynamicStyle

이렇게 state를 활용하여 동적인 스타일 변경도 가능하다.

조건부 스타일 사용 ( ? : 연산자)

&& , ? : 연산자를 사용하여 조건에 따라 다른 스타일을 적용할 수 있다.

import { useState } from "react"

function ConditionalStyle() {
  const [isActive, setIsActive] = useState(false)
  return (
    <div>
      <button onClick={() => setIsActive(!isActive)}
        style={{
          backgroundColor: isActive ? "blue" : "red",
          color: "white",
          padding: "10px 20px",
          border: "none",
          cursor: "pointer",
        }}
      >
        {isActive ? "활성화됨" : "비활성화됨"}
      </button>
    </div>
  )
}

export default ConditionalStyle

이렇게, 인라인 스타일은 빠르게 스타일을 적용할 때 유용하지만

유지보스 측면에서 한계가 있다.

실무에서는 보통 CSS 파일, CSS 모듈, style컴포넌트, 테일윈드 등을 더 많이 사용하는데

주로 CSS 파일을 임포트해서 className을 이용해 스타일을 적용하거나

아니면 테일윈드 모듈을 설치해서 사용하는 방식.

이 두 가지 중 HTML에서 CSS 파일로 연결해 스타일링 했던 것이 더 익숙하므로

CSS 파일을 사용하는 방식에 대해 알아보자

React 에서 일반 CSS 파일 사용하는 방법

우선 CSS 파일을 생성하는건 HTML과 방식은 똑같다.

그런 다음 컴포넌트에서 import 하고

마지막으로 HTML 태그의 className 속성을 이용해 스타일링 한다.

원래 HTML 에서는 "class = example" 이런식으로 클래스를 불러와 사용했지만

리액트에서는 className 속성을 사용한다.

다음 예제를 살펴보자

/* App.css */
.container {
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
}

.title {
  color: blue;
  font-size: 24px;
  font-weight: bold;
}

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: darkblue;
}

// App.jsx

import "./App.css" // css 파일 import

function App() {
  return (
    <div className="container">
      <h2 className="title">일반 CSS 파일 적용</h2>
      <button className="button">버튼</button>
    </div>
  )
}
export default App

위와 같이 className을 이용하여 스타일을 적용 시키고

CSS 파일을 import 하여 불러온 다옴 적용 시키면 다음과 같이 결과를 얻을 수 있다

여러 개의 CSS 파일을 컴포넌트별로 분리해서 사용하기

다음과 같이 CSS 파일을 컴포넌트마다 분리하여 관리할 수도 있다.

/* Header.css */
.header {
  background-color: black;
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 20px;
}

// Header.jsx

import "./Header.css"; // 개별 CSS 파일 import

function Header() {
  return <header className="header">헤더 영역</header>;
}

export default Header;

// App.jsx

import "./App.css" // css 파일 import
import Header from "./Header" // 헤더 컴포넌트 import

function App() {
  return (
    <div className="container">
      <Header /> {/* Header 컴포넌트 */}
      <h2 className="title">일반 CSS 파일 적용</h2>
      <button className="button">버튼</button>
    </div>
  )
}
export default App

이렇게하면 Header.jsx는 헤더 영역을 위한 별도의 스타일을 Header.css에서 관리하고

App.jsx에서 전체적인 스타일은 App.css에서 관리하므로

CSS 파일을 컴포넌트별로 나누어지니 유지보수가 쉬워진다.

여러 개의 클래스를 동적으로 추가하기

리액트에서는 className에 여러 개의 클래스를 동시에 적용할 수도 있다.

다음 예제를 살펴보자

/* Button.css */
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.primary {
  background-color: yellow;
  color: black;
}

.secondary {
  background-color: green;
  color: black;
}

// Button.jsx

import "./Button.css" // Button css파일 import

function ButtonCustom({ type }) { // type props 설정
  return (
    <>
      <button className={
        `button ${type === "primary" ? "primary" : "secondary"}`}>
        커스텀 버튼
      </button>
    </>
  )
}

export default ButtonCustom

// App.jsx

import "./App.css" // css 파일 import
import Header from "./Header" // 헤더 컴포넌트 import
import ButtonCustom from "./Button" // Button.jsx import

function App() {
  return (
    <div className="container">
      <Header /> {/* Header 컴포넌트 */}
      <h2 className="title">일반 CSS 파일 적용</h2>
      <button className="button">버튼</button>
      <ButtonCustom type="primary" /> {/* type이라는 props를 받아서 스타일 결정 (type이 primary이면 button primary 클래스 추가) */}
      <ButtonCustom type="secondary" /> {/* type이라는 props를 받아서 스타일 결정 (그 외의 경우 button secondary 클래스 추가) */}
    </div>
  )
}
export default App

위와 같이 type이라는 props값에 따라 버튼의 스타일을 다르게 적용하였으며

className을 조건부 (? :)로 적용하여 동적으로 클래스를 변경할 수 있다.

참고로 주의할 점은 CSS 파일을 import 할 때 상대경로를 꼭 확인해야한다.

import "./styles.css";  // 현재 폴더의 styles.css 가져오기
import "../styles.css"; // 상위 폴더의 styles.css 가져오기

또한, className으로 사용한다.

<h2 className="title">제목</h2> // 올바른 사용
<h2 class = "title">제목</h2> // 잘못된 사용

React - React의 렌더링 방식 : State

섭이님 — Thu, 27 Feb 2025 20:52:45 +0900

State가 변경될 때 React는 어떻게 렌더링할까?

React는 가상 DOM (Virtual DOM)을 기반으로 효율적인 렌더링을 수행하는 프레임워크이다.

※가상 (Virtual) DOM ?
리액트가 효율적으로 UI를 업데이트하기 위해 사용하는 가상의 DOM 구조이다.
기존 웹 브라우저는 일반적인 HTML DOM에서 직접 수정하면 속도가 느려지고
DOM 조작이 많아질 수록 성능이 크게 저하되는데
여기서 가상 DOM의 역할이 중요시하게 된다.
리액트는 가상 DOM을 메모리에 저장하고 실제로 DOM을 직접 조작하지 않으며
여기서 놀라운점은 상태(state)변경이 발생하면 가상 DOM에서 먼저 변경된 부분을 적용한 후,
실제 DOM과 비교하여 최소한의 변경만 적용한다.
이로써, 브라우저의 성능을 최적화하면서도 빠른 UI 업데이트가 가능하다.

어느정도 가상 DOM을 이해했다면, state가 변경될 때 리액트가 렌더링하는 방식을 알아보자

1. React의 기본 렌더링 원리

React 컴포넌트는 props와 state에 따라 UI를 결정하는 것은 지난 글들을 봤다면 알고 있을 것이다.

즉 props 또는 state가 변경되면 컴포넌트가 다시 렌더링된다.

import { useState } from "react"

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h2>카운트 : {count} </h2>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  )
}

//
export default Counter

setCount(count + 1)이 실행되면 리액트는 컴포넌트를 다시 렌더링 하지만

단순히 DOM을 다시 그리는 것이 아니라 최적화된 방식으로 렌더링한다.

다음 과정을 살펴보면

▼ React의 렌더링 과정 (State가 변경될 때의 흐름)

1) State가 변경됨 (setState 호출)

setState가 실행되면 리액트는 해당 컴포넌트의 새로운 state 값을 계산한다.
state 값이 변경되었을 때만 다음 단계로 진행.

2) 변경된 state로 새로운 가상 DOM 생성

리액트는 기존 가상 DOM을 복사한 후 새로운 state값을 반영한
새로운 가상 DOM을 생성한다.

3) 기존 가상 DOM과 새로운 가상 DOM을 비교 (Diffing 알고리즘)

리액트는 변경된 부분만 찾아서 업데이트하는 디핑 알고리즘 (Diffing)을 사용한다.
가상 DOM을 비교하여 어떤 요소를 변경해야하는지 확인한다.

4) 실제 DOM을 업데이트 (Reconciliation - 조정 과정)

변경된 부분만 실제 DOM에 적용한다.
전체 DOM을 다시 그리는 것이 아닌 최소한의 변경만 반영하여 성능을 최적화.

※ 디핑 (Diffing) 알고리즘?
디핑 (Diffing)은 비교를 뜻하는 단어로, 변경된 부분을 찾아내는 알고리즘을 의미한다.
즉 새로운 가상 DOM과 기존 DOM을 비교하여 변경된 부분을 찾는 과정이다.
이 과정을 통해 최소한의 DOM 업데이트가 이루어진다.

2. React 렌더링 과정 예제

다음 코드는 state 변경으로 인한 렌더링의 흐름을 예시로 나타냈다.

import { useState } from "react";

function Example() {
  console.log('컴포넌트 랜더링'); // 렌더링될 떄마다 실행됨

  const [count, setCount] = useState(0);
  return (
    <div>
      <h2>카운트: {count}</h2>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  )
}
export default Example

처음 실행될 때 "컴포넌트 렌더링: {count:0}",

버튼을 클릭하여 setCount(count +1) 실행하면 "컴포넌트 렌더링: {count:1}"

또 버튼을 클릭하면 "컴포넌트 렌더링: {count:2}"

즉, state가 변경될 떄마다 컴포넌트가 다시 렌더링된다.

3. 불필요한 렌더링 방지

부모 컴포넌트가 렌더링 될 때 자식 컴포넌트도 함께 렌더링되는 경우가 있다.

원래 리액트의 기본 동작 방식이지만 불필요한 리렌더링이 발생하면

성능 저하를 유발할 수 있다.

다음 코드의 문제를 살펴보자.

▼ 부모가 리렌더링될 때 자식도 함께 리렌더링 되는 경우

import { useState } from "react"

function Parent() {
  const [count, setCount] = useState(0);
  console.log('부모 컴포넌트 렌더링');

  return (
    <div>
      <h2>부모 컴포넌트</h2>
      <button onClick={() => setCount(count + 1)}>부모 카운트 증가</button>
      <Child />
    </div>
  )
}

function Child() {
  console.log('자식 컴포넌트 렌더링');

  return <h3>자식 컴포넌트</h3>
}

export default Parent

초기 렌더링은 다음과 같다.

부모의 setCount 버튼을 클릭하면

count 값이 변경되었으므로 부모는 다시 렌더링 되는 것은 맞는데

자식은 변경된 내용이 없는데도 부모와 같이 다시 렌더링 되는 것을 확인할 수 있다.

즉 부모의 count가 변경되면 자식도 함께 렌더링 되지만

자식의 내용은 전혀 바뀌지 않으며 불필요한 렌더링이 발생하고 있음을 알 수 있다.

▼ 불필요한 렌더링 해결 방법 : React.memo()

React.memo()를 사용하면 props가 변경되지 않는 한

자식 컴포넌트를 다시 렌더링하지 않는다.

import { memo } from "react";
import { useState } from "react"

function Parent() {
  const [count, setCount] = useState(0);
  console.log('부모 컴포넌트 렌더링');

  return (
    <div>
      <h2>부모 컴포넌트</h2>
      <button onClick={() => setCount(count + 1)}>부모 카운트 증가</button>
      <MemoizedChild />
    </div>
  )
}

// React.memo() 적용 (불필요한 리렌더링 방지)
function Child() {
  console.log('자식 컴포넌트 렌더링');

  return <h3>자식 컴포넌트</h3>
}

const MemoizedChild = memo(Child)
export default Parent

위와 같이 자식은 처음을 제외한 이후 렌더링되지 않는 것을 학인할 수 있다.

▼ React.memo로 해결되지 않는 경우 - useCallback

만약에 부모에서 자식으로 함수 props로 전달하는 경우

React.memo() 만으로는 최적화되지 않는다.

다음은 문제가 발생한 코드이다.

import { memo } from "react";
import { useState } from "react"

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

  // handleClick 함수가 부모가 리렌더링 될 때마다 새로 생성됨
  const handleClick = () => {
    console.log('버튼 클릭됨');

  }
  console.log('부모 컴포넌트 렌더링');

  return (
    <div>
      <h2>부모 컴포넌트 카운트 {count}</h2>
      <button onClick={() => setCount(count + 1)}>부모 카운트 증가</button>
      <Child handleClick={handleClick} />
    </div>
  )
}

const Child = memo(({ handleClick }) => {
  console.log("자식 컴포넌트 렌더링");
  return <button onClick={handleClick}>자식 버튼</button>;
});

export default Parent;

React.memo를 사용했음에도 handleClick 함수가

부모가 리렌더링될 때마다 새로 생성되므로 Child도 계속 리렌더링되는 현상이 생긴다.

이럴떄 useCallback을 사용하여 부모가 리렌더링되더라도

같은 함수 객체를 유지할 수 있다.

다음과 같이 useCallback을 사용하여 함수가 새로 생성되지 않도록 최적화한다.

import { useCallback } from "react";
import { memo } from "react";
import { useState } from "react"

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

  // useCallback 사용하여 함수가 새로 생성되지 않도록 최적화
  const handleClick = useCallback(() => {
    console.log('버튼 클릭됨');

  }, []);
  console.log('부모 컴포넌트 렌더링');

  return (
    <div>
      <h2>부모 컴포넌트 카운트 {count}</h2>
      <button onClick={() => setCount(count + 1)}>부모 카운트 증가</button>
      <Child handleClick={handleClick} />
    </div>
  )
}

const Child = memo(({ handleClick }) => {
  console.log("자식 컴포넌트 렌더링");
  return <button onClick={handleClick}>자식 버튼</button>;
});

export default Parent;

이렇게하여 부모가 setCount로 리렌더링되더라도 Child는 다시 렌더링되지 않으며

useCallback 덕분에 handleClick 함수가 매번 새로 생성되지않는다.

즉 부모가 리렌더링될 때 자식이 불필요하게 렌더링되지 않도록 하려면

React.memo와 useCallback을 함께 사용해야한다.

React - State

섭이님 — Wed, 26 Feb 2025 18:46:52 +0900

State(상태)는 리액트에서 컴포넌트 내부에서 관리되는 동적인 데이터를 의미한다.

사용자 입력, API 응답, 버튼 클릭 등과 같은 이벤트에 따라 변할 수 있는 값을 저장하는 공간으로,

state가 변경될 때 마다 리액트는 자동으로 컴포넌트를 재렌더링하여 UI를 최신 상태로 유지한다.

State 사용방법

▼ 함수형 컴포넌트에서 useState 사용하기

import { useState } from "react"

function Counter() {
  // count 상태(state)와 이를 변경할 수 있는 setCount 함수 선언
  const [count, setCount] = useState(0)

  return (
    <div>
      <h2>현재 카운트 : {count}</h2>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  )
}

export default Counter

useState(0)은 count 라는 state 변수를 선언하고 초기값을 0으로 설정한다.

setCount(newValue)는 cunt 값을 변경하는 함수이며

버튼 클릭시 setCount(count + 1)을 호출하여 count 값을 증가, 감소 시킨다.

State의 특징

1. State는 개별 컴포넌트 내부에서 관리된다.

State는 각 컴포넌트 내부에서만 관리되는 값으로

다른 컴포넌트에 직접 접근하거나 수정할 수는 없지만 props를 통해 전달할 수 있다.

다음 예제를 살펴보자

import { useState } from "react";

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

  return (
    <div>
      <h3>카운트: {count}</h3>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <h2>독립적인 두 개의 카운터</h2>
      <Counter />
      <Counter />
    </div>
  );
}

위 예제에서는 두 개의 카운터가 있지만 각각의 state는 독립적으로 관리되기 때문에

버튼을 누르면 각 카운터가 개별적으로 증가하는 것을 확인할 수 있으며 (state가 독립적이라는 증거)

하나의 Counter 컴포넌트가 변경되어도 다른 Counter의 값은 바뀌지 않는다.

2. State는 불변성이다.

state는 직접 수정할 수 없고 반드시 setState(클래스형) 또는

useState의 setter 함수(함수형)을 사용해야한다.

다음 예제를 살펴보자

▼ 잘못된 예제

import { useState } from "react"

function Counter() {
  const [count, setCount] = useState(0)
  const handleClick = () => {
 // state를 직접 수정 - setCount(setter함수)를 사용하지 않으면 리액트가 변경을 감지 하지못함
     count = count + 1
  }
  return (
    <div>
      <h3>카운트 :{count}</h3>
      <button onClick={handleClick}>증가</button>
    </div>
  )
}

export default Counter

▼ 올바른 예제

import { useState } from "react"

function Counter() {
  const [count, setCount] = useState(0)
  const handleClick = () => {
    setCount(count + 1) //setCount는 useState의 setter 함수
  }
  return (
    <div>
      <h3>카운트 :{count}</h3>
      <button onClick={handleClick}>증가</button>
    </div>
  )
}
export default Counter


// 또는

import { useState } from "react"

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h3>카운트 :{count}</h3>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  )
}

export default Counter

3. state 업데이트는 비동기적으로 처리됨

리액트에서는 여러 개의 setState 호출이 있을 경우

최적화를 위해 한꺼번에 처리(batch)될 수 있다.

즉, 이전 state 값을 기준으로 상태를 업데이트하려면 prevState를 사용해야한다.

다음 예제를 살펴보자

▼ 잘못된 예제

import { useState } from "react"

function Counter() {
  const [count, setCount] = useState(0)
  const handleClick = () => {
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
  }
  return (
    <div>
      <h3>카운트 :{count}</h3>
      <button onClick={handleClick}>증가</button>
    </div>
  )
}

export default Counter

위와 같이 setCount setter함수를 3번이나 호출했지만

실제로는 count 값이 1만 증가한다.

리액트는 여러 setState 호출을 묶어서 처리(batching)하기 때문에

count 값이 변경된 것을 한 번만 반영한다.

▼ 올바른 예제

import { useState } from "react"

function Counter() {
  const [count, setCount] = useState(0)
  const handleClick = () => {
    setCount((prev) => prev + 1)
    setCount((prev) => prev + 1)
    setCount((prev) => prev + 1)
  }
  return (
    <div>
      <h3>카운트 :{count}</h3>
      <button onClick={handleClick}>증가</button>
    </div>
  )
}

export default Counter

위와 같이 prevState를 활용하여 버튼을 클릭하면 count 값이 한 번에 3씩 증가하게 된다.

prev(이전 상태 값)을 사용하면 리액트가 batch처리하더라도

올바르게 상태가 업데이트된다.

State와 Props 차이점

State는 컴포넌트 내부에서 관리하는 데이터이며 변경할 수가 있고

props는 부모에서 자식으로 전달되는 데이터이며 변경할 수 없는 차이가 있다.

또한 state는 동적인 데이터 관리인 반면 props는 정적인 데이터를 전달하고

state로 버튼을 클릭하면 카운터가 증가하듯

props로 구현하려면 부모가 자식컴포넌트에 데이터를 전달하게 로직을 구성해야하는 번거로움이 있다.

대충 정리하면 다음과 같다.

구분	State	Props
데이터 변경 가능 여부	변경 가능 (setState, useState)	변경 불가능 (부모로부터 받은 값)
관리 위치	컴포넌트 내부에서 관리	부모 컴포넌트에서 전달
주요 역할	동적인 데이터 관리	정적인 데이터 전달

useState와 useReducer

컴포넌트가 복잡해지고 상태관리가 어려워질 때

useState 대신 useReducer를 사용할 수 있다.

예를들면 여러개의 state가 서로 의존적이거나

상태 업데이트 로직이 복잡할 때(if-else가 많아질때)등

상태가 여러개이고 상태간의 의존성이 useReducer를 사용하는 것이 좋다.

▼ useState (간단한 상태관리)

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

const increment = () => setCount(count + 1);

▼ useReducer (복잡한 상태관리)

import { useReducer } from "react";

// 상태를 변경하는 reducer 함수
function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>카운트: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>증가</button>
      <button onClick={() => dispatch({ type: "decrement" })}>감소</button>
    </div>
  );
}

export default Counter

useState에서 객체(object) 상태 관리하기

useState를 사용할 때 객체 상태 업데이트에 관하여 주의할 점이 있다.

다음 예시를 살펴보자

import { useState } from "react"

function UserProfile() {
  const [user, setUser] = useState({ name: "섭이", age: 20 })

  const updataNmae = () => {
    setUser({ name: "행섭" }) // age 값이 사라지는 현상 발생
  }
  return (
    <div>
      <h2>사용자 정보</h2>
      <p>이름: {user.name} </p>
      <p>나이:{user.age} </p>
      <button onClick={updataNmae}>이름 변경</button>
    </div>
  )
}

export default UserProfile

위 코드 처럼 setUser({name:행섭"})을 사용하면

기존 age 데이터가 사라지는 문제가 발생한다.

해결 방법은 다음과 같이 spread 연산자를 사용하여 기존 상태를 유지시켜야한다.

import { useState } from "react"

function UserProfile() {
  const [user, setUser] = useState({ name: "섭이", age: 20 })

  const updataNmae = () => {
    // 이름만 변경하면서 기존 객체의 데이터를 유지하는 함수
    setUser((prevUser) => ({ ...prevUser, name: "행섭" }))
  }
  return (
    <div>
      <h2>사용자 정보</h2>
      <p>이름: {user.name} </p>
      <p>나이:{user.age} </p>
      <button onClick={updataNmae}>이름 변경</button>
    </div>
  )
}

export default UserProfile

위와 같이 기존 user 객체를 유지하면서 name 값만 변경할 수 있게 spread 연산자를 사용하였고

그 결과 age 값이 사라지지 않고 유지된다.

또한여러 개의 속성을 동시에 변경할 수 있는데

다음과 같이 name과 age를 동시에 변경 시킬 수 있다.

import { useState } from "react"

function UserProfile() {
  const [user, setUser] = useState({ name: "섭이", age: 20, city: "Seoul" })

  const updataNmae = () => {
    setUser((prevUser) => ({ ...prevUser, name: "행섭", age: prevUser.age + 1 })) // 1증가

  }
  return (
    <div>
      <h2>사용자 정보</h2>
      <p>이름: {user.name} </p>
      <p>나이:{user.age} </p>
      <p>도시: {user.city}</p>
      <button onClick={updataNmae}>이름 변경</button>
    </div>
  )
}

export default UserProfile

useState에서 배열 업데이트 하기 (map, filter)

객체뿐만 아니라 배열을 state로 관리할 때도 기존 값을 유지하면서 업데이트 해야한다.

setState로 배열을 업데이트할 때는 map, filter,spread 연산자(...)등을 사용해야한다.

다음 예제를 살펴보자

▼ 리스트에서 특정 아이템의 값 변경하기

import { useState } from "react"

function TodoListi() {
  const [todos, setTodos] = useState([
    { id: 1, text: "리액트 공부하기", completed: false },
    { id: 2, text: "낮잠자기", completed: false },
    { id: 3, text: "게임하기", completed: false },
  ])

  // 특정 할일 완료 상태 변경
  const toogleTodo = (id) => {
    setTodos((prevTodos) =>
      prevTodos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    )
  }
  return (
    <div>
      <h2>할일 목록</h2>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <spen style={{ textDecoration: todo.completed ? "line-through" : "none" }}>
              {todo.text}
            </spen>
            <button onClick={() => toogleTodo(todo.id)}>
              {todo.completed ? "취소" : "완료"}
            </button>
          </li>
        ))}

      </ul>
    </div>
  )
}

export default TodoListi

위와 같이 완료 버튼을 누르면 toogleTodo(n) 실행 -> id: n인 항목의 completed 값을 true로 변경되며

map()을 사용해 배열을 순회하면서 특정 id와 일치하는 항목의 상태를 변경한다

또한 spread 연산자를 활용하여 기존 객체의 다른 속성은 유지한 채 completed만 변경한다.

State의 비효율적인 업데이트 방지 (리랜더링(Re-render) 최적화)

1. React.memo를 사용하여 불필요한 렌더링 방지하기

다음 코드에서 setCount 버튼을 누르면

부모가 리렌더링 될 떄, 자식도 불필요하게 리렌더링되는 현상이 있다.

import { useState } from "react";

function Parent() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h2>부모 컴포넌트</h2>
      <button onClick={() => setCount(count + 1)}>부모 카운트 증가</button>
      <Child />
    </div>
  )
}

function Child() {
  console.log('자식 컴포넌트 렌더링');
  return <h3>자식컴포넌트 입니다.</h3>
}

export default Parent

해결 방법은 다음과 같이 React.memo를 사용한다.

import { memo, useState } from "react";

function Parent() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h2>부모 컴포넌트</h2>
      <button onClick={() => setCount(count + 1)}>부모 카운트 증가</button>
      <MemoizedChild />
    </div>
  )
}

function Child() {
  console.log('자식 컴포넌트 렌더링');
  return <h3>자식컴포넌트 입니다.</h3>
}

const MemoizedChild = memo(Child) // React.memo 사용하여 불필요한 렌더링 방지

export default Parent

이렇게 하면 Child는 props가 변경되지 않는 한 다시 렌더링되지 않으며

setCount를 눌러도 자식은 그대로 유지된다.

2) useCallback을 사용하여 함수가 불필요하게 재생성되지 않도록 방지

import { useState, useCallback, memo } from "react";

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

  // useCallback을 사용하지 않으면 부모가 리렌더링될 때마다 handleClick이 새로 생성됨
  const handleClick = useCallback(() => {
    console.log("handleClick 함수는 재사용됨!");
  }, []);

  return (
    <div>
      <h2>부모 컴포넌트</h2>
      <button onClick={() => setCount(count + 1)}>부모 카운트 증가</button>
      <Child handleClick={handleClick} />
    </div>
  );
}

const Child = memo(({ handleClick }) => {
  console.log("자식 컴포넌트 렌더링됨!");
  return <button onClick={handleClick}>자식 버튼</button>;
});

export default Parent;

위와 같이 useCallback을 사용하여 handleClick 함수가

부모가 리렌더링될 때마다 새로 생성되지 않으며

Child가 불필요하게 리렌더링되지 않는다.

React - children props

섭이님 — Fri, 21 Feb 2025 21:33:40 +0900

리액트에서는 모든 컴포넌트가 props를 받을 수 있지만

children prop은 특별한 역할을 하는데

컴포넌트 태그 내부에 있는 내용을 동적으로 전달할 때 사용하고

레이아웃 컴포넌트, 재사용 가능한 UI 요소 등을 만들 때 매우 유용하다.

기본적으로는 props는 부모 -> 자식으로 데이터를 전달하는 역할을 한다고 했을 때,

children prop은 컴포넌트 태그 사이의 내용을 가져오는 역할을 한다.

즉 children을 사용하면 부모 컴포넌트에서 원하는 내용을 동적으로 넣을 수 있다.

children prop 기본 사용법

// Card.jsx

function Card({ children }) {
  return (
    <div className='card'>
      {/* children을 통해 태그 내부의 내용을 랜더링 */}
      {children}
    </div>
  )
}

export default Card

// App.jsx

import Card from "./Card"

function App() {
  return (
    <div>
      <Card>
        <h2>카드 컴포넌트 입니다.</h2>
        <p>원하는 내용 입력 가능</p>
      </Card>

      <Card>
        <button>버튼 기능 추가 가능</button>
      </Card>
    </div>
  )
}

export default App

이렇게 children을 활용하여 컴포넌트 내부에 동적인 내용을 넣을 수 있으며

Card 컴포넌트를 어떤 용도로든 재사용이 가능하다. (ex: h2, p, button 등)

children - 간단한 사용 예제 (Layout, Modal...)

페이지 레이아웃을 만들 때 children을 사용하면 코드가 더 깔끔해지고 관리하기 편하다.

// Layouy.jsx

function Layout({ children }) {
  return (
    <div>
      <header>헤더 부분</header>
      <main>{children}</main> {/* 이 부분에 동적인 콘텐츠가 들어감 */}
      <footer>푸터 부분</footer>
    </div>
  )
}

export default Layout

// App.jsx

import Card from "./Card"
import Layout from "./Layout"

function App() {
  return (
    <div>
      <Layout>

        <Card>
          <h2>카드 컴포넌트 입니다.</h2>
          <p>원하는 내용 입력 가능</p>
        </Card>

        <Card>
          <button>버튼 기능 추가 가능</button>
        </Card>

      </Layout>
    </div>
  )
}

export default App

위와 같이 children 안에 원하는 페이지 내용을 넣어서

레이아웃을 모든 페이지에서 재사용 가능하다.

이 방법은 실제 프로젝트에서 헤더와 푸터가 고정된 레이아웃을 만들 때 자주 사용된다.

또한 팝업(모달) 창을 만들 때도 children을 활용하여 더 유연한 UI를 구성할 수 있다

(단 useState로 열고 닫는 기능까지 추가해야 하므로 다음 기회에..)

children - 스타일 적용

마찬가지로, 스타일링을 하여 색상이나 폰트 등 유연하게 변경할 수 있다.

// Color.jsx

function Color({ children, backgroundColor }) {
  return (
    <div style={{ backgroundColor, padding: "20px", borderRadius: "10px" }}>
      {children} {/* 안에 어떤 내용이든 들어갈 수 있음 */}
    </div>
  );
}

export default Color;

// App.jsx

import Card from "./Card"
import Layout from "./Layout"
import Color from "./Color"

function App() {
  return (
    <div>
      <Layout>

        <Card>
          <h2>카드 컴포넌트 입니다.</h2>
          <p>원하는 내용 입력 가능</p>
        </Card>

        <Color backgroundColor="lightblue" >
          <p>연한 파란색</p>
        </Color>

        <Color backgroundColor="lightpink" >
          <p>연한 핑크색</p>
        </Color>

        <Card>
          <button>버튼 기능 추가 가능</button>
        </Card>

      </Layout>
    </div>
  )
}

export default App

Color 컴포넌트를 사용할 때마다 다른 색상을 설정할 수 있다.

children - propTypes

children도 props의 일종이기 때문에

propTypes를 사용하여 유효성 검사를 추가해 주는 것이 좋다.

children을 사용할 경우에도 propTypes를 설정하지 않으면

다른 props와 마찬가지로 ESlint 경고가 발생한다.

// Card.jsx - propTypes 추가

import Proptypes from "prop-types"

function Card({ children }) {
  return (
    <div className='card'>
      {/* children을 통해 태그 내부의 내용을 랜더링 */}
      {children}
    </div>
  )
}
// children을 `node` 타입으로 지정 (React 요소, 문자열, 숫자 등 허용)
Card.propTypes = {
  children: Proptypes.node.isRequired, // children이 필수 값임을 명시
};

export default Card

// Color.jsx - PropTypes 추가

import PropTypes from "prop-types"

function Color({ children, backgroundColor }) {
  return (
    <div style={{ backgroundColor, padding: "20px", borderRadius: "10px" }}>
      {children} {/* 안에 어떤 내용이든 들어갈 수 있음 */}
    </div>
  );
}

Color.propTypes = {
  children: PropTypes.node.isRequired,
  backgroundColor: PropTypes.string // backgroundColor는 css 속성이므로 string
}

export default Color;

// Layouy.jsx - Proptypes 추가

import PropTypes from "prop-types"

function Layout({ children }) {
  return (
    <div>
      <header>헤더 부분</header>
      <main>{children}</main> {/* 이 부분에 동적인 콘텐츠가 들어감 */}
      <footer>푸터 부분</footer>
    </div>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired
}

export default Layout

여기서 코드를 보면 PropTypes.node에서 node라는 단어가 나오게되는데,

children은 여러가지 타입을 가질 수 있으며 node, element, string,number등의 타입이 존재한다.

어떤 타입을 지정해야 하는지 방법을 알아보자.

▶ children에 사용할 수 있는 propTypes 타입

리액트에서는 children의 타입을 일반적으로 node로 설정하는 것이 적합하다.

타입	설명	사용 예제
PropTypes.node	모든 리액트 랜더링 가능한 요소 (문자열, 숫자, JSX 배열 등)	<Card>텍스트</Card> <Card><h1>제목</h1></Card>
PropTypes.element	리액트 요소만 가능 (JSX 컴포넌트)	<Card><h1>제목</h1></Card>
PropTypes.string	문자열만 가능	<Card>텍스트</Card>
PropTypes.number	숫자만 가능	<Card>{123}</Card>

즉 PropTypes.node를 사용하면 대부분의 경우를 포함할 수 있기 때문에 node를 주로 설정한다.

설명을 더해서, Proptyles.node와 PropTypes.element의 차이점은

node는 React에서 렌더링할 수있는 거의 모든 값을 포함하기 때문에 일반적으로 더 유용하며

element는 JSX 요소만 받을 때 사용하기 때문에 node보다 조금 덜 사용된다.

그리고 backgroundColor는 CSS 속성으로 사용되기 때문에 PropTypes.string을 사용했으며

node로는 사용할 수 없고 왜 string으로 사용하는지 알아보자

backgroundColor는 CSS에서 색상을 나타내는 문자열 값인데

여기서 중요한 점은 "문자열 값" 이다

backgroundColor: "red" // 문자열
backgroundColor: "#ff0000" // 문자열
backgroundColor: "rgb(255, 0, 0)" // 문자열

위 코드를 보면 전부 문자열로 색상을 지정하고 있다.

그러므로..

PropTypes.node 는 JSX요소 (div,h1)와 관련됨 -> 배경색과 무관함!

PropTypes.element 는 JSX요소 (React.createELement())와 관련됨 -> 역시나 배경색과 무관함

▶ children의 isRequired

children이 필수( isRequired )인지 여부는 컴포넌트 사용방식에 따라 다르다.

isRequired를 사용하면 컴포넌트를 사용할 때 children이 반드시 있어야 하므로

children을 빼먹으면 ESLint 경고가 뜰 것이다.

하지만 isRequired가 없으면 children이 없어도 정상적으로 동작할 것이다.

또한 defaultProps를 사용하면 children이 없을 때 기본값을 설정할 수 있다.

// children이 필수일 경우

Card.propTypes = {
  children: PropTypes.node.isRequired,
};

// children이 선택 사항일 경우 (isRequired 없이 기본값 설정)

Card.propTypes = {
  children: PropTypes.node,
};

Card.defaultProps = { // defaultProps를 사용하면 children이 없을 때 기본값을 설정
  children: "기본 내용입니다.", // 기본값 설정
};

정리하면 다음과 같다.

children은 리액트에서 태그 내부의 내용을 동적으로 전달하는 props이다.
Card, Layout 등 재사용 가능한 컴포넌트를 만들 때 사용된다.
children을 활용하면 컴포넌트의 유연성이 증가하고 재사용성이 높아진다.
children도 prop의 일부이므로 propTypes로 유효성 검사를 해야한다.
isRequired를 추가하면 children을 필수값으로 설정할 수 있다.

React - props

섭이님 — Thu, 20 Feb 2025 19:59:19 +0900

앞서 공부했던 내용들 중에 다양한 예시로 props를 사용했었다

props가 도대체 무엇이고 어떻게 사용하는지 이 글을 통해 알아보자.

리액트에서는 컴포넌트가 재사용 가능해야 하므로

특정한 값(데이터)을 외부에서 받아서 동적으로 다룰 수 있어야 한다.

이때 외부에서 값을 전달해주는 역할을 하는 것이 바로 props이다.

React props의 기본 개념

props (프로퍼티)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이며

리액트에서는 컴포넌트 간에 데이터를 주고 받을 때

직접 값을 수정하는 것이 아니라,

props를 통해 데이터를 전달해 줘야한다.

만약 props없이 고정된 값이라면 다음과 같은 예시를 들 수 있다.

// Greeting.jsx

function Greeting() {
  return (
    <>
      <h1>안녕하세요 섭이님</h1>  {/* {name}이아닌 고정된 값 */}
    </>
  )
}

export default Greeting

// App.jsx

import Greeting from "./Greeting";

function App() {
  return (
    <>
      <Greeting />
    </>
  )
}

export default App

이렇게 코드를 작성하개되면 항상 "섭이"라는 이름의 고정된 값이 출력된다

다른 이름을 표시하고 싶다 = 동적으로 표현하고 싶다 => props를 사용한다

props를 활용한 동적인 데이터 전달

위와 같이 고정된 값을 사용하지 않고

부모 컴포넌트에서 props를 전달하면 자식 컴포넌트에서 그 값을 사용할 수 있다.

// Greeting.jsx

function Greeting({ name }) {
  return (
    <>
      <h1>안녕하세요 {name}님</h1>
    </>
  )
}

export default Greeting

// App.jsx

import Greeting from "./Greeting";

function App() {
  return (
    <>
      <Greeting name="섭이" />
      <Greeting name="행섭" />
    </>
  )
}

export default App

이렇게 같은 Greeting 컴포넌트를 여러번 사용해도 props를 통해 다른 값이 표시된다.

여러 개의 props 전달하기

props는 다음과 같이 여러 개를 한 번에 보낼 수 있다.

// Greeting.jsx

function Greeting({ name, age, job }) {
  return (
    <>
      <h1>안녕하세요 {name}님</h1>
      <p>나이: {age}</p>
      <p>직업: {job}</p>
    </>
  )
}

export default Greeting

// App.jsx

import Greeting from "./Greeting";

function App() {
  return (
    <>
      <Greeting name="섭이" age={20} job="백수" />
      <Greeting name="행섭" age={21} job="비숍" />
    </>
  )
}

export default App

각 Greeting이 다른 props 값을 받아서 각각 다르게 표시된다.

props로 배열 & 객체 전달하기

props를 통해 배열이나 객체도 전달할 수 있다.

▶ 배열 전달 (map() 과 함께 사용)

// UserList.jsx

function UserList({ users }) {
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}


export default UserList;

// App.jsx

import Greeting from "./Greeting";
import UserList from "./UserList";

function App() {
  const UserNames = ['스기따라', '죡팡', '힝카인'] // props로 배열 전달
  return (
    <>
      <Greeting name="섭이" age={20} job="백수" />
      <Greeting name="행섭" age={21} job="비숍" />
      <br />
      <UserList users={UserNames} /> {/* 리스트 출력 */}
    </>
  )
}

export default App

위와 같이 배열을 map()을 사용하여 리스트로 출력할 수 있다.

▶ 객체 전달

객체를 props로 전달하면 코드가 더 깔끔해진다.

// profile.jsx

function Profile({ user }) {
  return (
    <>
      <h2>{user.name}</h2>
      <p>나이: {user.age}</p>
      <p>직업: {user.job}</p>
    </>
  )
}

export default Profile

// App.jsx

import Greeting from "./Greeting";
import Profile from "./Profile";
import UserList from "./UserList";

function App() {
  const UserNames = ['스기따라', '죡팡', '힝카인']
  const userInfo = { name: "섭이", age: 20, job: "백수" } // props로 객체 전달
  return (
    <>
      <Greeting name="섭이" age={20} job="백수" />
      <Greeting name="행섭" age={21} job="비숍" />
      <br />
      <UserList users={UserNames} />
      <br />
      <Profile user={userInfo} /> {/* 리스트 출력 */}
    </>
  )
}

export default App

props 기본값 설정 하는 방법

props를 전달하지 않았을 때, 다음과 같이 기본값을 설정한다.

▶ || 연산자를 활용한 기본값 설정

// Greeting.jsx

function Greeting({ name, age, job }) {
  return (
    <>
      <h1>안녕하세요 {name || "게스트"}님</h1>
      <p>나이: {age || "정보가 없습니다."}</p>
      <p>직업: {job || "정보가 없습니다."}</p>
    </>
  )
}

export default Greeting

name이 전달되지 않으면 "게스트" 가 기본값으로 사용된다.

// App.jsx

import Greeting from "./Greeting";
import Profile from "./Profile";
import UserList from "./UserList";

function App() {
  const UserNames = ['스기따라', '죡팡', '힝카인']
  const userInfo = { name: "섭이", age: 20, job: "백수" }
  return (
    <>
      <Greeting /> {/* props 없이 사용 */}
      <Greeting name="행섭" age={21} job="비숍" />
      <br />
      <UserList users={UserNames} />
      <br />
      <Profile user={userInfo} />
    </>
  )
}

export default App

propTypes로 데이터 타입 검사

지금까지 예제를 작성했을 때 props값을 넣으면

매번 'is missing in props validation' 오류가 발생한 것을 확인할 수 있었다.

그런데 이 오류가 생겨도 코드가 실행되지 않는 것은 아니라는 걸 직접 해봤기 때문에 알고 있을 텐데,

'props' is missing in props validation 오류는 개발 환경에서 코드 품질을 높이기 위한

ESLint의 경고이며 현재 props 유효성 검사가 설정되지 않아서 ESLint가 경고를 띄우는 것이다.

즉 컴포넌트에서 props를 받고 있지만

해당 prps 가 어떤 타입인지 명시하지 않았기 때문이다.

올바른 props 유효성 검사를 설정하면 오류 없이 더 안전한 코드를 작성할 수 있는데

해결 할 수 있는 두 가지 방법이 존재한다.

해결 방법 1: propTypes를 사용하여 유효성 검사 추가

propTypes를 사용하면 컴포넌트가 받을 props의 데이터 타입을 정의하고

필수 여부를 설정할 수 있다.

한번 propTypes를 적용해보자

▼ prop-types 라이브러리 설치

npm install prop-types

▼ propTypes 적용

// Greeting.jsx

import PropTypes from "prop-types"
function Greeting({ name, age, job }) {
  return (
    <>
      <h1>안녕하세요 {name || "게스트"}님</h1>
      <p>나이: {age || "정보가 없습니다."}</p>
      <p>직업: {job || "정보가 없습니다."}</p>
    </>
  )
}

// propTypes
Greeting.propTypes = {
  name: PropTypes.string, // name은 문자열 타입
  age: PropTypes.number, // age는 숫자 타입
  job: PropTypes.string, // job은 문자열 타입
}

export default Greeting

// Profile.jsx

import PropTypes from "prop-types"
function Profile({ user }) {
  return (
    <>
      <h2>{user.name}</h2>
      <p>나이: {user.age}</p>
      <p>직업: {user.job}</p>
    </>
  )
}

Profile.propTypes = {
  user: PropTypes.shape({ //
    name: PropTypes.string.isRequired, // name은 필수 문자열
    age: PropTypes.number, // age는 숫자 (필수 아님)
    job: PropTypes.string, // job은 문자열 (필수 아님)
  }).isRequired, // user 객체 자체가 필수
}

export default Profile

※ isRequired를 추가하면 필수값이 되며 누락시 ESLint 경고가 발생한다.

※ shape는 객체의 형태를 검사하는 역할을 하며 객체 내부의 각 속성까지 상세하게 타입을 검사한다.

// UserList.jsx

import PropTypes from "prop-types";
function UserList({ users }) {
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

// propTypes
UserList.propTypes = {
  users: PropTypes.arrayOf(PropTypes.string).isRequired, // 배열 요소 검사
}

export default UserList;

※ arrayOf는 배열의 요소 타입을 검사하는 역할을 하며

배열을 받을 때, 배열의 각 요소가 올바른 타입인지 확인할 수 있다.

해결 방법 2: ESLint 설정에서 props validation 비활성화 (비추천)

이 방식은 props 유효성 검사를 완전히 끄는 것이므로 추천하지 않는다.

그래도 경고가 너무 신경쓰인다면 설정에서 비활성화를 할 수 있다.

settings.json에서 ESLint 설정을 변경하면 되는데

다음 설정을 추가하면 된다.

{
  "rules": {
    "react/prop-types": "off"
  }
}

위와 같이 설정하면 props 유효성 검사를 하지 않기 때문에

경고 메세지가 더이상 나타나지는 않지만 props 오류를 쉽게 찾을 수 없기 때문에

사용하는 것을 추천하지 않는다.

결론은 propTypes는 리액트에서 props의 타입을 정의하고

props의 올바른 데이터 타입을 강제하여 실수를 방지하고 버그를 예방할 수 있다.

propTypes를 설정하면 잘못된 타입이 들어왔을 때 ESLint 경고가 발생하여

프로젝트에서 코드의 가독성과 유지 보수성이 높아진다.