리액트 주말반 첫번째 수업

컴포넌트의 정의

컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 부품입니다. 
 마치 레고 블록처럼, 작은 컴포넌트들을 모아서 더 크고 복잡한 UI를 만들 수 있습니다. 

각 컴포넌트는 자체적인 기능과 모양을 가지며, 다른 컴포넌트들과 독립적으로 동작할 수 있습니다.

 

Props의 정의

Props는 "properties"의 줄임말로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. 
컴포넌트 간에 데이터를 주고받을 수 있게 해주는 React의 핵심 개념이라고 할 수 있습니다.

Props의 주요 특징

단방향 데이터 흐름: 데이터는 항상 부모에서 자식 컴포넌트로만 전달됩니다. 
읽기 전용(불변성): 자식 컴포넌트는 전달받은 props를 수정할 수 없고, 오직 읽기만 가능합니다. 
다양한 데이터 전달: 문자열, 숫자뿐만 아니라 함수, 객체, 배열 등 다양한 타입의 데이터를 전달할 수 있습니다. 

 

 

이벤트

 

<Header></Header> 컴포넌트에서 이벤트를 전달

onChangeMode라는 이름은 keyword가 아니므로 사용자에 따라 다르게 정할 수 있다.

<Header title="WEB" onChangeMode={function(){
        alert('Header');
      }}></Header>

 

 

Header컴포넌트에서는 부모로부터 전달 된 이벤트를 아래와 같이 사용 할 수 있다.

function Header(props) {
  console.log('props', props.title)
  return (
    <header>
      <h1><a href="/" onClick={function(event){
        event.preventDefault();
        props.onChangeMode();
      }}>{props.title}</a></h1>
    </header>
  )
}

 

 

출처: https://lshjju.tistory.com/