📘 [Recat] React 핵심 - 컴포넌트, JSX, 속성, 상태 등 - 2

2025년 04월 03일 in Dev / Frontend on #React #Web

[Recat] React 핵심 - 컴포넌트, JSX, 속성, 상태 등 - 2

파일에 컴포넌트 저장 및 좋은 프로젝트 구조 활용

1. 컴포넌트 파일 분리

기존의 App.jsx에 생성했던 컴포넌트들을 분리된 파일로 관리하여 코드의 구조화 및 유지보수성을 향상시키기 위함

• Header.jsx와 CoreConcept.jsx를 components 폴더로 이동 및 저장
• 각 컴포넌트는 해당 파일에서 export default 문법으로 내보냄
  • 예: export default function Header() {...}

2. App.jsx에서 컴포넌트 재사용

• App.jsx에서 Header, CoreConcept를 import

import { CORE_CONCEPTS } from "./data.js";
import Header from "./components/Header.jsx";
import CoreConcept from "./components/CoreConcept.jsx";

컴포넌트 옆에 컴포넌트 스타일 파일 저장하기

• 관련 파일(Header.jsx, Header.css)을 같은 폴더에 묶어 관리
• 컴포넌트별 정리로 유지보수성과 구조 이해도 향상

import './Header.css';

✅ 적용 방식 주의사항

• CSS는 전역 범위로 적용되며, 단순히 Header.css를 Header.jsx에서 import한다고 해서 해당 스타일이 그 컴포넌트에만 자동 한정되지는 않음.
• 예: <h1> 스타일이 정의되어 있다면, 모든 <h1> 요소에 적용됨.
• 스타일을 컴포넌트별로 분리하면 관리가 쉬워지고 명확한 구조를 갖출 수 있음
• 다만 CSS는 기본적으로 전역 적용되므로, 이후 강의에서 소개될 CSS 모듈 또는 CSS-in-JS와 같은 방식으로 스타일 범위 제한을 적용할 수 있음

컴포넌트 구성 : children prop 속성

리액트에서는 <TabButton>Components</TabButton>와 같이 컴포넌트 태그 사이에 내용을 작성하면, 그 내용은 children prop으로 전달됨

export default function TabButton({ children } 또는 props) {
  return <li><button>{children}또는{props.children}</button></li>;
}

children vs label 방식 비교

• 두 방식 모두 버튼 텍스트를 전달할 수 있음

방식 1: children 방식

<TabButton>Components</TabButton>

방식 2: 명시적 props 방식

<TabButton label="Components" />
// 컴포넌트 내부에서: <button>{props.label}</button>

이벤트 처리하기

• 이벤트 핸들러 함수는 값을 전달해야 하므로 함수 이름만 넘김
• onClick={handleClick} ✅
• onClick={handleClick()} ❌ → 함수가 즉시 실행됨

/* 컴포넌트 사이에 text는 props.children받을수있다. */
export default function TabButton({ children }) {
  function handleClick() {
    console.log("hellow world");
  }

  //({children})가능 컴포넌트 속성인 label로 넘기면 ({label}) 가능
  return (
    <li>
          {/* props의 내장객체인 children 컴포넌트 태그 사이에 text를 받아옴 */}
          {/* 이벤트 처리 onClick 버튼 클릭시 이벤트 발생 handleClick 함수 호출 */}
      <button onClick={handleClick}>{children}</button>
    </li>
  );
}

함수를 Prop(속성)의 값으로 전달하기

App 컴포넌트에서 onSelect prop으로 함수를 TabButton에 전달

// App.jsx
function handleSelect() {
  console.log("Selected!");
}
<TabButton onSelect={handleSelect}>Components</TabButton>

TabButton 컴포넌트에서는 onSelect를 받아 내부 <button>의 onClick에 연결

export default function TabButton({ children, onSelect }) {
  return <li><button onClick={onSelect}>{children}</button></li>;
}

이벤트 함수에 커스텀 인자 전달하기

화살표 함수 사용

onSelect={handleSelect} 로 넘기면 리액트가 어떤 값을 전달해야 할지 모름 onClick 이벤트에 인자값을 전달하기 위해서는 화살표 함수를 사용해야함

<TabButton onSelect={() => handleSelect('Components')}>Components</TabButton>
<TabButton onSelect={() => handleSelect('JSX')}>JSX</TabButton>

• 화살표 함수는 지금 실행되지 않으며, 버튼 클릭 시에만 실행됨
• 따라서 내부에서 handleSelect()를 호출하며 원하는 인수 전달이 가능

State(상태) 관리 & Hooks(훅) 사용법

useState란?

• 리액트가 제공하는 Hook 함수
• 컴포넌트의 상태(데이터) 를 저장하고 관리하며,
• 상태가 변경되면 컴포넌트가 자동으로 다시 실행(렌더링) 됨

import { useState } from 'react';

const [selectedTopic, setSelectedTopic] = useState('Please click a button');

selectedTopic : 현재 상태 값 (초기값으로 설정됨) setSelectedTopic : 상태를 업데이트하는 함수. 호출 시 컴포넌트가 재실행됨

setSelectedTopic()을 사용하여 상태를 변경

function handleSelect(selectedButton) {
  setSelectedTopic(selectedButton);
  console.log(selectedTopic) //이전 값이 출력
}

• setSelectedTopic()을 호출하면 컴포넌트 함수 전체가 다시 실행됨
• 그러나 상태 업데이트는 즉시 반영되지 않고 비동기적으로 예약됨
• 그 결과, setSelectedTopic() 바로 다음에 console.log(selectedTopic)을 찍으면 이전 값이 출력됨
• 조건문, 반복문, 내부 함수 등에서는 호출 불가
• 상태 변경 함수는 항상 비동기적으로 작동하며, 컴포넌트를 재실행시킴
• 상태 값은 변경 불가 상수로 유지 (const)
• useState는 리액트에서 UI를 상태 기반으로 동적으로 만들기 위한 핵심 도구
• 이벤트 + 상태 + 재렌더링이라는 흐름을 통해 동작

데이터 기반 State(상태) 가져오기 및 출력

상태 초기화

상태 초기값은 components로 설정

const [selectedTopic, setSelectedTopic] = useState("components");

handleSelect 함수 내에서 상태 업데이트

function handleSelect(selectedButton) {
  setSelectedTopic(selectedButton);
}

data.js에서 EXAMPLES 객체를 import

import { EXAMPLES } from "./data.js";

JSX에서 상태를 기반으로 동적으로 접근 selectedTopic 값이 변함에 따라 EXAMPLES 객체값이 동적으로 출력

<h3>{EXAMPLES[selectedTopic].title}</h3>
<p>{EXAMPLES[selectedTopic].description}</p>
<pre>
  <code>{EXAMPLES[selectedTopic].code}</code>
</pre>

초기 상태 예외 처리

• 상태 초기값이 components로 설정되어 있기 때문에 첫 화면 렌더링 시 오류 없음
• 초기 상태로 "Please click a button"과 같은 존재하지 않는 키를 넣으면 EXAMPLES[selectedTopic]가 undefined가 되어 오류 발생

조건적 콘텐츠 렌더링

기존에는 useState 초기값은 components로 설정되어 있어서 components 관련 contents가 출력 되었지만 초기화면에 “Please select a topic” 텍스트 출력하고싶다면

상태 초기값을 빈 문자열로 설정

const [selectedTopic, setSelectedTopic] = useState('');

• 아무 버튼도 선택되지 않았음을 나타내기 위해 빈 문자열(“”) 사용
• EXAMPLES['']는 존재하지 않기 때문에, 조건 없이 접근하면 오류 발생

조건부 렌더링 방식 3가지

삼항 연산자 사용

{!selectedTopic 
  ? <p>Please select a topic</p> 
  : <div id="tab-content"> 
      <h3>{EXAMPLES[selectedTopic].title}</h3>
      <p>{EXAMPLES[selectedTopic].description}</p>
      <pre><code>{EXAMPLES[selectedTopic].code}</code></pre>
    

AND 연산자 (&&) 사용

{!selectedTopic && <p>Please select a topic</p>}
{selectedTopic && (
  <div id="tab-content">
    <h3>{EXAMPLES[selectedTopic].title}</h3>
    <p>{EXAMPLES[selectedTopic].description}</p>
    <pre><code>{EXAMPLES[selectedTopic].code}</code></pre>
  </div>
)}

변수에 JSX 저장 (if문 활용)

let tabContent = <p>Please select a topic</p>;

if (selectedTopic) {
  tabContent = (
    <div id="tab-content">
      <h3>{EXAMPLES[selectedTopic].title}</h3>
      <p>{EXAMPLES[selectedTopic].description}</p>
      <pre><code>{EXAMPLES[selectedTopic].code}</code></pre>
    </div>
  );
}

// JSX 내에 변수 삽입
{tabContent}

CSS 스타일링 및 동적 스타일링

• 사용자가 클릭한 버튼(TabButton)을 시각적으로 강조(활성화 스타일 적용)
• 선택된 버튼에만 active 클래스를 동적으로 추가

className은 JSX에서 스타일링을 위한 속성

• HTML의 class와 같지만, JSX에서는 className을 사용
• isSelected가 true이면 active 클래스 적용
• false이면 클래스 없음

/* 컴포넌트 사이에 text는 props.children받을수있다. */
export default function TabButton({ children, onSelect, isSelected }) {
  //({children})가능 컴포넌트 속성인 label로 넘기면 ({label}) 가능
  return (
    <li>
      {/* props의 내장객체인 children 컴포넌트 태그 사이에 text를 받아옴 */}
      {/* 이벤트 처리 onClick 버튼 클릭시 이벤트 발생 handleClick 함수 호출 */}
      <button className={isSelected ? "active" : undefined} onClick={onSelect}>
        {children}
      </button>
    </li>
  );
}

App 컴포넌트에서 상태에 따라 isSelected 전달

			<TabButton
              isSelected={selectedTopic === "components"}
              onSelect={() => handleSelect("components")}
            >
              Components
            </TabButton>
            <TabButton
              isSelected={selectedTopic === "jsx"}
              onSelect={() => handleSelect("jsx")}
            >
              JSX
            </TabButton>
            <TabButton
              isSelected={selectedTopic === "props"}
              onSelect={() => handleSelect("props")}
            >
              Props
            </TabButton>
            <TabButton
              isSelected={selectedTopic === "state"}
              onSelect={() => handleSelect("state")}
            >
              State
            </TabButton>

• selectedTopic 상태와 현재 버튼의 식별자('components', 'jsx', 'props', 'state')를 비교해 true/false 결정
• 이 값이 TabButton에 isSelected로 전달됨

List(리스트) 데이터 동적 출력

기존에는 CoreConcept 컴포넌트를 수동으로 4번 출력되게함 데이터(CORE_CONCEPTS)가 변경되면 수동으로 코드도 수정해야 함 이렇게 하면 중복 코드가 많고, 유지보수성이 낮음

<CoreConcept {...CORE_CONCEPTS[0]} />
<CoreConcept {...CORE_CONCEPTS[1]} />
<CoreConcept {...CORE_CONCEPTS[2]} />
<CoreConcept {...CORE_CONCEPTS[3]} />

.map()을 활용한 동적 렌더링

map() 안에서 JSX 요소를 반환 CORE_CONCEPTS 배열의 크기에 맞게 자동으로 렌더링됨 항목이 추가/제거되면 코드 수정 없이 자동 반영

{CORE_CONCEPTS.map((item) => (
    <CoreConcept key={item.title} {...item} />
))}

• 리액트가 항목을 고유하게 식별할 수 있어야 함
• 효율적인 리렌더링 및 DOM 업데이트를 위해 사용됨
• 반복 컴포넌트에는 반드시 고유한 key 값이 필요
• 예시: title, id, 혹은 고유한 식별자 사용

📑 Reference

---

• 【한글자막】 React 완벽 가이드 2025 with React Router & Redux | Udemy
• 이미지 출저 Freepik | 올인원 AI 크리에이티브 툴

---