React 생활코딩 - 6. 컴포넌트 만들기

순수한 html 코드를 react로 잘 정리정돈을 해보자!

 

 

객체지향, App이라는 클래스를 만들고 react의 Compnent 라고 하는 react가 갖고있는 클래스를 상속해 새로운 클래스를 만든다. 그리고 그 클래스는 render라는 메소드를 가지고 있다.

 

Compnent를 만드는 코드

 

- 반드시 render() 가 있어야 한다

- 일반적인 함수는 funcion이 있지만 --> funcion render() 이런식으로~ 그러나 자바스크립트의 최신 스펙이 들어가 있는 클래스라는 것 안에 소속되는 함수는 funcion을 생략한다.

- 중요! Component를 만들땐, 반드시 하나의 최상위 태그로 시작되고 써야만 한다.

 

 

이제 Component를 만들어보자!

pure.html에 있는 코드를 App.js에 정리해 하나 씩 넣어준다 <header>, <nav>, <article>를 넣어보자

pure.html

App.js

 

위에 선언된 Component를 아래 최상위 태그를 넣어준다

 

그러면 여기서

 

 

 

 

 

이렇게 바뀐다  짜잔~~~ > <

 

 

재밌다! 리액트!