React 컴포넌트 개념과 작성법 정리

컴포넌트란

• UI를 구성하는 독립적이고 재사용 가능한 단위
• 레고 블록처럼 조립해서 전체 화면 구성
• 한 번 작성한 컴포넌트를 여러 번 재사용 가능
• 코드의 가독성, 유지보수성, 확장성 확보

컴포넌트의 역할

역할	설명
UI 구성	페이지의 특정 영역 담당
재사용성	동일한 컴포넌트 여러 번 사용
유지보수	기능별 코드 분리로 수정 용이
독립성	개별 동작, 영향 최소화

 

컴포넌트 종류

종류	설명
함수형 컴포넌트	함수로 작성, React Hooks 사용
클래스형 컴포넌트	클래스 기반, 상태/생명주기 사용 (현재는 사용 감소)

 

작성 규칙

• 컴포넌트 이름은 반드시 대문자로 시작 jsx

const element = <Header />;  // React 컴포넌트
const element2 = <div />;    // 일반 HTML

 

기본 컴포넌트 예시 

jsx

function Header() {
  return (
    <header>
      <h1><a href="/">WEB</a></h1>
    </header>
  );
}

function Nav() {
  return (
    <nav>
      <ol>
        <li><a href="/read/1">html</a></li>
        <li><a href="/read/2">css</a></li>
        <li><a href="/read/3">js</a></li>
      </ol>
    </nav>
  );
}

function Article() {
  return (
    <article>
      <h2>Welcome</h2>
      Hello, WEB
    </article>
  );
}

function App() {
  return (
    <div className="App">
      <Header />
      <Nav />
      <Article />
    </div>
  );
}

export default App;

 

props로 데이터 전달

function Article(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      {props.content}
    </article>
  );
}

function App() {
  return (
    <div>
      <Article title="React 소개" content="React는 라이브러리입니다." />
    </div>
  );
}

 

---

실습 예제를 통해 컴포넌트 특징 파악하기

function Nav(props) {
  const lis = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(
      <li key={t.id}>
        <a
          id={t.id}
          href={"/read/" + t.id} 
          onClick={(event) => {
            event.preventDefault();
            props.onChangeMode(Number(event.target.id));
            //컴포넌트 내부로 들어오면 id를 String 형태로 바꿔줘서 Number로 형 변환을 해줘야 한다. 
          }}
        >
          {t.title}
        </a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
  
  
  function App() {
  const [mode, setMode] = useState("WELCOME");
  const [id, setId] = useState(null);

  // const mode = "WELCOME";
  const topics = [
    { id: 1, title: "html", body: "html is ...." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "javascript", body: "javascript is ...." },
  ];
  let content = null;
  if (mode === "WELCOME") {
    content = <Article title="Welcome" body="Hello, Web"></Article>;
  } else if (mode === "READ") {
    // content = <Article title="Welcome" body="Hello, Read"></Article>;
    let title,
      body = null;
    for (let i = 0; i < topics.length; i++) {
      if (topics[i].id === id) {
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title={title} body={body}></Article>;
  }

  return (
    <div className="App">
      <Header
        title="WEB"
        onChangeMode={() => {
          setMode("WELCOME");
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangeMode={(_id) => {
          setMode("READ");
          setId(_id);
          // mode = "READ";
        }}
      ></Nav>
      {content}
    </div>
  );
}

컴포넌트 내부로 들어오면 id는 String 형태로 바꿔줘서 Number로 형 변환을 해줘야 한다.

---

실전 예제 모음

버튼 컴포넌트

jsx

function Button(props) {
  return <button>{props.text}</button>;
}

 

네비게이션 바

jsx

 

function NavLink(props) {
  return <a href={props.url}>{props.text}</a>;
}

function Navbar(props) {
  return (
    <nav>
      <ul>
        {props.links.map((link, idx) => (
          <li key={idx}>
            <NavLink url={link.url} text={link.text} />
          </li>
        ))}
      </ul>
    </nav>
  );
}

카드 컴포넌트

jsx

 

function Card(props) {
  return (
    <div className="card">
      <h3>{props.title}</h3>
      <p>{props.content}</p>
      <Button text={props.buttonText} />
    </div>
  );
}

이미지 컴포넌트

jsx

 

function Image(props) {
  return <img src={props.src} alt={props.alt} />;
}

종합 App 예시

jsx

 

function App() {
  const links = [
    { url: "/home", text: "홈" },
    { url: "/about", text: "소개" },
    { url: "/contact", text: "연락처" }
  ];

  return (
    <div>
      <Navbar links={links} />
      <Card 
        title="첫 번째 카드" 
        content="컴포넌트로 만든 카드입니다." 
        buttonText="자세히 보기" 
      />
      <Image 
        src="https://example.com/image.jpg" 
        alt="예시 이미지" 
      />
    </div>
  );
}

요약

항목	설명
컴포넌트 이름 규칙	대문자 시작
props	부모 → 자식 데이터 전달
재사용	여러 곳에서 반복 사용
함수형 vs 클래스형	함수형이 현재 대세

 

참조

이고잉 [생활코딩! React 리액트 프로그래밍 ] 

https://www.yes24.com/Product/goods/127005207