[React] 컴포넌트 생성

오늘은 리액트 컴포넌트를 생성해 보겠습니다.

 

원래는 밑처럼 html문서를 작성하지만 

컴포넌트를 생성해서 html을 정리하여 필요한 것만 빼다 쓸 수 있는 리액트의 컴포넌트 만들기를 해보겠습니다.

 

 

컴포넌트를 생성하는 방법은 js파일에 class를 이용하여 작성해줍니다.

class 이름 extends Component{
  render(){
    return(
      html내용
    );
  }
}

 

위처럼 만들어 주면됩니다.

 

 

이런식으로 작성을 해준다음

 

 

이름들을 불혀 넣어주면 성공입니다.

 

 

효율적으로 리팩토링을 하는 방법에는 this.props를 사용하여 값을 필요할때만 넣어 주는식으로 사용 가능합니다.