[React.js] component 와 props

1. Component

우선, 리액트는 HTML에 직접 요소를 넣지 않는다.

기본적으로 index.html에 들어갈 내용을 index.js에서 불러와 사용한다.

이를 렌더링이라고 하고, 그 내부 요소들을 component라 한다.

index.html의 body는 비어있고, index.js에서 App.js 파일을 불러다가 React.DOM에 렌더링한다.

 

이렇게 렌더링을 진행하는데, 이때 직접 렌더링 할 수 있는 component는 오직 하나이다.

따라서 보통 App.js를 렌더링하고, App.js 내 App() 함수에서 다른 component들을 사용하게 된다.

Movie component를 임의로 생성하여 App() 내부에서 사용.

 

굳이 뽑자면 component는 함수이다. 다른 js파일을 생성하고 그를 import해 사용하더라도, 결국 그 js파일 내에 함수를 불러다가 사용하는 것과 같다.

 

App.js에서 Movie를 지우고 따로 만들었다. 정상작동한다.

 

2. Props

Props란 부모 component가 자식 component에게 넘겨주는 매개변수라고 생각하면 쉽다.

실제로 형태 또한 다른 언어에서의 매개변수와 비슷하다. 아주 사용하기 쉽다.

title이란 이름의 prop을 넘겨주고, 그것을 Movie component에서 사용하는 모습

 

props의 이름과 갯수는 개발자가 원하는 대로 만들 수 있다.

위 사진처럼 하나를 사용할 수도 있고, 여러개를 사용할 수도 있다.

제목, 장르, 러닝타임을 prop을 통해서 넘겨주고, 출력한 모습

 

이 component와 prop을 사용하여 객체지향적인 프로그래밍(?)을 할 수 있고, 코드에 대한 캡슐화 및 단순화를 할 수 있을것 같다.