리액트 핵심 개념: 컴포넌트와 Props -2탄 - withMAKE.CO.KR 자동화세상모든이야기

리액트 핵심 개념: 컴포넌트와 Props

안녕하세요, 여러분! 리액트 시리즈의 두 번째 글에 오신 것을 환영합니다. 오늘은 리액트의 핵심 개념인 컴포넌트(Component)와 props에 대해 알아보겠습니다. 이 개념들을 이해하면 리액트의 강력함을 직접 경험할 수 있을 거예요.

시작은 repl.it으로

repl.it

시작합니다.

컴포넌트: 리액트의 Building Blocks

리액트에서 컴포넌트는 재사용 가능한 UI 조각입니다. 쉽게 말해, 웹페이지의 부품이라고 생각하면 됩니다. 예를 들어, 우리가 '박스'라는 컴포넌트를 만들어 볼게요.

jsx

import React from 'react';

function Box() {

  return (

    <div className="box">

      <p>박스 내용</p>

    </div>

  );

}

export default Box;

이렇게 만든 Box 컴포넌트는 다른 곳에서 쉽게 재사용할 수 있습니다.

jsx

iimport Box from './Box';

function App() {

  return (

    <div>

      <Box />

      <Box />

      <Box />

    </div>

  );

}

이렇게 하면 세 개의 동일한 박스가 생성됩니다. 코드의 재사용성이 높아지고, 관리도 쉬워지죠.

Props: 컴포넌트에 데이터 전달하기

props는 컴포넌트에 데이터를 전달하는 방법입니다. 컴포넌트를 함수라고 생각하면, props는 그 함수의 매개변수라고 볼 수 있어요.

jsx

function Box(props) {

  return (

    <div className="box">

      <p>{props.name}</p>

    </div>

  );

}

function App() {

  return (

    <div>

      <Box name="코딩 알려주는 누나" />

      <Box name="지민" />

      <Box name="정국" />

    </div>

  );

}

이렇게 하면 각 박스에 다른 이름이 표시됩니다. props를 사용하면 동일한 컴포넌트를 다양한 데이터로 재사용할 수 있습니다.

동적 데이터 처리

리액트의 또 다른 강점은 동적 데이터 처리입니다. 예를 들어, 버튼을 클릭했을 때 특정 동작을 수행하게 할 수 있습니다.

jsx

function Box({ name, number }) {

  const clickMe = () => {

    alert("리액트 강의를 마쳤습니다!");

  };

  return (

    <div className="box">

      <p>{name}</p>

      <p>Box {number}</p>

      <button onClick={clickMe}>클릭</button>

    </div>

  );

}

function App() {

  return (

    <div>

      <Box name="코딩 알려주는 누나" number={1} />

      <Box name="지민" number={2} />

      <Box name="정국" number={3} />

    </div>

  );

}

이 예제에서는 각 박스에 이름과 번호를 props로 전달하고, 클릭 이벤트도 추가했습니다.

마치며

리액트의 컴포넌트와 props 개념을 이용하면, 코드의 재사용성을 높이고 동적인 웹 애플리케이션을 쉽게 만들 수 있습니다. 이는 전통적인 웹 개발 방식에 비해 훨씬 효율적이고 유지보수가 쉽습니다.

다음 글에서는 리액트의 상태(State) 관리에 대해 알아보도록 하겠습니다. 리액트의 세계에서 여러분의 여정이 즐거우시기를 바랍니다!