[생활코딩 리액트] 10-11강 컴포넌트 만들기

📌리액트 본격 사용연습 시작

리액트 없이 만든 html 환경을, 리액트의 컴포넌트를 활용해서 remade하도록 할 것이다. 

이렇게 심플한 html 연습 파일을 하나 만들어준 뒤, 리액트의 src 디렉토리의 App.js를 열어준다. 

이 태그들은 자바스크립트가 아니다. 이것은 페북이 만든 언어 jsx고, 알아서 자바스크립트 언어로 컨버트해주는 언어다.  

class App extends Component {

render() {

return (

<div className="App">

Hello react!!

</div>

);

}

}

 

 

바로 이부분이 컴포넌트를 만드는 코드다.

(말하자면 템플릿 같은 것으로 이해하자. 객체지향을 이해하면 좀 더 잘 이해할 수 있지만 여기서는 일단 패스) 

 

📌<header>를 Subject라는 컴포넌트로 만들기

📌이때, 주의사항!

1. 컴포넌트를 만들 때는 반드시, 하나의 최상위 태그만을 포함해야 한다. 

2. 컴포넌트 이름은 대문자로 시작한다.

 

 

 

실제 App.js에는 <Subject>태그가 적혀있는데, 웹상에서는, 해당 태그를 알아서 <header>태그로 읽어주는 것을 확인할 수 있다.