Component

Function component

function Welcome(props){
  return <h1>Hi, {props.name}</h1>
}

• 코드가 간단함

Class Component

class Welcome extends React.Component {
  render(){
    return <h1>Hi, {props.name}</h1>
  }
}

• React.Component 상속 받아서 만듦

Component 만들때 주의할 점

• Component이름은 항상 대분자로 시작해야한다!(소문자로 시작하는 것은 DOM으로 인식)

Component 렌더링

function Welcome(props){
  return <h1>Hi, {props.name}</h1>
}

const element = <Welcome name = '수리' />
  
ReactDOM.render(
  element,
  document.getElementById('root')
)

-> Welcome 컴포넌트에 {name:'수리'}라는 값을 넣어서 호출하고, 그 결과로 React Element가 생성됨. 생성된 엘리먼트는 reactDOM을 통해 실제 DOM에 업데이트되고, 브라우저를 통해 볼 수 있게 됨.

Component 합성

• Component 안에 또 다른 Component를 쓸 수 있다.
  -> 복잡한 화면을 어러개의 Component로 나눠서 구현 가능
  

function Welcome(props){
  return <h1>Hi, {props.name}</h1>
}

const element = <Welcome name = '수리' />
function App(props) {
  <div>
    <Welcome name = '수리' />
    <Welcome name = '레오' />
    <Welcome name = '보리' />
  </div>
}
   
ReactDOM.render(
  element,
  document.getElementById('root')
)

App은 Welcome 컴포넌트 3개를 포함하고있는 컴포넌트가 됨
-> 컴포넌트 합성

root노드는 하나임

Component 추출

• 복잡한 컴포넌트를 여러개로 나누는 것
  -> 재사용성 up
  -> 개발속도 up
  

1. Avatar 추출

• img태그 사용한 것
  

보편적인 단어 사용 -> 재사용할때 용이

• 컴포넌트에 적용
  

2. UserInfo 추출
   Avatar 컴포넌트 담은 UserInfo 까지 추출
   

• 컴포넌트에 적용
  

아래 그림과 같이 구성되어있음

• 컴포넌트를 어느정도까지 추출하는 것이 좋은지에 대해 정해진 기준은 없음
  기능단위로 구분, 재사용이 가능한 형태로 추출하는 것이 좋음

재사용이 가능한 Component를 많이 가지고 있을 수록 개발의 속도는 빨라진다!