[구름EDU|처음만난React#4] Components and Props

---

본 게시글은 구름EDU 처음 만난 React 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

처음 만난 React

처음 만난 React(리액트) - 구름EDU

구름 EDU

구름EDU - 모두를 위한 맞춤형 IT교육

---

Components

React by Components-Based

Component by Other Components

컴포넌트들을 모아서 개발

입력 > JavaScript function > 출력

Props > React Component > React element

(동작방식은 그 흔한 객체지향의 붕어빵과 붕어빵 틀이랑 똑같다)

Props

Prop = Property = 속성

Component의 Prop = Component의 속성 (붕어빵의 밀가루? 팥?)

Props = ReadOnly = 읽기만 할 수 있음. 수정할 수 없음.

즉, React Component는 pure하다.

같은 Input에 의하여 항상 같은 Output을 출력하여야 한다.

Component 만들기

Function Components = JavaScript Function과 비슷

Class Components = EX6 Class를 가지고 Components를 정의

Component 이름은 항상 대문자로 시작해야한다. 

Component 랜더링

function Welcome(props){

  return <h1>Hello, {props.name}</h1>;

}

const element = <Welcome name="Sara"/>;

 

ReactDOM.render(

  element,

  document.getElementById('root')

)

 

reportWebVitals();function Welcome(props){

  return <h1>Hello, {props.name}</h1>;

}

const element = <Welcome name="Sara"/>;

 

ReactDOM.render(

  element,

  document.getElementById('root')

)

 

reportWebVitals();

 

Component의 합성

Component 안에 또 다른 Component를 사용할 수 있다.

function Welcome(props){

  return <h1>Hello, {props.name}</h1>;

}

 

function Welcomes(){

  return(

    <div>

      <Welcome name="Sara"/>

      <Welcome name="Cahal"/>

      <Welcome name="Edite"/>

    </div>

  );

}

 

ReactDOM.render(

  <Welcomes />,

  document.getElementById('root')

);

 

reportWebVitals();

 

Component의 추출

큰 Component를 여러개의 작은 Component로 쪼갤 수 있으면, 재사용성이 올라간다.

즉, 쪼갤 수 있다면 무조건 쪼개자.