React가 작동하는 방법

React는 소스코드에 처음부터 HTML을 넣지 않고, HTML에서 HTML을 추가하거나 제거하는 방법을 사용한다.

Component란?

<App /> 를 컴포넌트(component)라고 부른다. 이 컴포넌트는 1개 밖에 가질 수 없다.

예를들어, <App /> <App2 /> 이런 식으로 두가지 이상을 가질 수 없다.

컴포넌트는 function App() 내부의 HTML을 반환한다.

이러한 Javascript와 HTML의 조합을 jsx라고 부른다.

Property

사진 속에서 Food는 Component, fav는 Property, kimchi는 value를 나타낸다.

그리고 props.fav 와 {fav}는 같은 의미를 가진다.

Key

리액트에서 각 list들은 unique한 Key를 가져야한다.

따라서,

위 그림과 같이 id를 설정해주어야한다.

PropTypes

PropTypes은 전달요소 중에 형식이 다르거나 빠진 것이 있으면 알려주는 역할을 한다.

npm install prop-types 를 입력해서 설치를 해준다.

그리고 전달요소에 맞춰서 다음 이미지와 같이 작성한다.

Food.proptypes 에서 proptypes 이외의 다른 것을 적으면 react에서 이해할 수 없게 때문에 다른 글자를 적으면 적용되지 않는다.

rating이 number형인지 string형인지 boolean형인지 확인이 가능하게 된다.

또한, isRequired를 적어주면 요소가 존재하는지 undefine인지 확인할 수 있게 된다.

Router

npm install react-router-dom을 설치한다

<Route path="/">
    <LandingPage />
<Route/>

를 다음과 같이 나타내 줄 수 있다.

<Route exact path="/" component={LandingPage} />