React > Components 에 대해서

컴포넌트 형태

2가지 방법

Class

function

 

React 16.8 이후부터 function 을 이용해서 만든다.

 

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

 

항상 HTML return 을 해야한다.

 

 

Props

매개변수처럼 컴포넌트에 속성값으로 전달할 수 있다. 

 

전달방법1

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red" />);

 

전달방법2

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

 

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}