들어가기 전에
이번 시간에는 순수한 HTML로 짠 코드를 리액트로 잘 정리정돈하는 작업을 해보겠습니다.
이전 시간에 작성한 Pure.html 과 src 안에있는 App.js를 비교해보면서 하나하나 확인해봅시다.
수업에 시작하기 앞서 logo.svg라는 파일이 있으신 분들은 건 우리 수업에서 필요가 없는 파일이므로 지우겠습니다.
학습목표
컴포넌트를 이해하고 컴포넌트를 만들어 사용할 수 있습니다.
핵심단어
- 컴포넌트
- jsx
강의 듣기
들어가기 전에
이번 시간에는 순수한 HTML로 짠 코드를 리액트로 잘 정리정돈하는 작업을 해보겠습니다.
이전 시간에 작성한 Pure.html 과 src 안에있는 App.js를 비교해보면서 하나하나 확인해봅시다.
수업에 시작하기 앞서 logo.svg라는 파일이 있으신 분들은 건 우리 수업에서 필요가 없는 파일이므로 지우겠습니다.
학습목표
컴포넌트를 이해하고 컴포넌트를 만들어 사용할 수 있습니다.
핵심단어
강의 듣기
이번 시간에는 순수한 HTML로 짠 코드를 리액트로 잘 정리정돈하는 작업을 해보겠습니다.
먼저 컴포넌트를 만들어 보겠습니다.
class App extends Component {
render() {
return (
<div className="App">
Hello, React!!
</div>
);
}
}
위 코드가 컴포넌트를 만드는 코드입니다.
App이라는 클래스를 만들고 컴포넌트라고 하는 리액트가 갖고있는 클래스를 상속해서 새로운 클래스를 만드는 겁니다.
그리고 이 클래스는 render 라고 하는 메소드를 가지고 있습니다.
이 것을 복사해서 똑같은 틀로 앞서 만든 <header> 내용을 포함하는 Subject 컴포넌트를 만들어 보겠습니다.
class Subject extends Component {
render() {
return (
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
}
클래스는 대문자로 시작합니다. "extends Component "는 subject라는 compnent를 만든다는 뜻으로 생각하시면 됩니다.
우리가 아는 일반적인 함수는 앞에 function이 붙습니다. 하지만 "클래스"에 소속되어있는 함수는 function을 생략합니다.
이 때 컴포넌트는 반드시 하나의 최상위 태그만 사용해야 합니다. Subject 컴포넌트에서는 header 태그가 최상위 태그입니다.
이렇게 pure.html의 <header> 부분을 Subject라고하는 이름의 태그로 정의했습니다.
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
</div>
);
}
}
우리가 정의한 <Subject>라는 태그를 추가하면 아래와 같은 결과가 만들어집니다.
div class가 App인 태그 안쪽에 <header>라는 태그가 생겼습니다.
리액트 코드에서는 <Subject> 지만 리액트의 처리를 통해 최종적으로 웹 브라우저가 알아들을 수 있는 이름으로 바꿔준겁니다.
App.js 파일에 작성하고 있는 코드는 자바스크립트랑 거의 비슷하지만 자바스크립트의 까다로운 부분을 해결하기 위해
페이스북에서 만든 컴퓨터 언어 "jsx"입니다.
이렇게 "jsx" 로 코드를 작성하면 create-react-app이 자바스크립트 코드로 컴벌팅을 해줍니다.
생각해보기
<nav> 태그를 컴포넌트로 만들어보세요.