[React] 리액트 컴포넌트 만들기

 

 

노마드코더 - ReactJS로 영화 웹서비스 만들기

 

 

 

 

여기서 <App />는 HTML이 아닌 컴포넌트다.

 

 

 

 

컴포넌트란 HTML을 반환하는 함수다.

리액트는 컴포넌트와 함께 동작하고 모든것은 컴포넌트이다.

 

 리액트는 컴포넌트를 가져와서 브라우저가 이해할 수 있는 일반 HTML으로 만든다.

 

 

자바스크립트안의 HTML을 리액트에선 JSX라고 부른다.(리액트에 특화된 유일한 개념)

 

 

 

 

src폴더 안에 Potato.js 파일을 작성해보자.

 

리액트 앱은 한번의 하나의 컴포넌트만 렌더링 할 수 있다.

따라서 모든 것은 App안에 들어가야만 한다.

 

App안에 많은 컴포넌트를 넣을 수 있고, 이러한 컴포넌트 안에 더 많은 컴포넌트를 import할 수 있다.

 

 

App안에 Potato컴포넌트를 넣는다면 정상적으로 Hello와 I love Potato가 잘 출력된것을 확인할 수 있다.

 

 

 

 

 

함수로 선언해도 가능하다.

 

 

 

리액트는 재사용한 컴포넌트를 만들 수 있다. 계속해서 반복해서 사용할 수 있는 것이다.

 

 

 

 

food 컴포넌트에 fav, something ...의 속성에 value를 넣고 이 prop들을 인자로 받아 출력해보면

console.log에는 object가 찍힌다. 

그 object는 컴포넌트로 전달된 모든 props들이다.

 

 

 

 

이 때 props.fav 와 { fav }는 같다.

둘다 kimchi를 출력한다.

 

 

 

 

 

---

 

• jsx는 HTML + Javascript다.
• 컴포넌트는 대문자로 시작해야한다.
• 컴포넌트로 정보를 보낼 수 있다.
• props란 컴포넌트에 넣게 되는 것들로, argument로 전달된다.
• props.fav = { fav }