오늘의 진도

#2 JSX & PROPS (#2.0~#2.4)
#3 STATE (#3.0)

#2 JSX & PROPS

#2.0 Creating your first React Component

HTML과 비슷해 보이지만 component. react는 component와 함께 동작하고 모든 것은 component임.

그럼 component는 무엇인가?
: HTML을 반환하는 함수
react는 component를 사용해서 HTML처럼 작성하려는 경우에 필요함.

javascript와 HTML 사이의 이러한 조합을 jsx라고 함 -> react에서 나온 매우 custom한 유일한 개념

실습

potato.js를 만들자

import React from 'react';

function Potato() {
    return <h3>I love potato</h3>;
}

export default Potato;

index.js의 옆에 를 하려니 문제가 있음. (물론 import 해줘야 함)
➡ react application이 하나의 component만을 rendering함.
그러면 App.js에 Potato를 넣자

import React from 'react';
import Potato from './Potato';

function App() {
  return (
    <div className="App">
      <h1>Hello!</h1>
      <Potato />
    </div>
  );
}

export default App;

react가 component를 가져와 브라우저가 이해할 수 있는 평범한 일반 HTML로 만듦.

이번 강의 결론
react application은 한 번에 하나의 component만 rendering 할 수 있다!

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

이렇게 <App />만 가능하다는 것

#2.1 Reusable Components with JSX + Props

react의 장점: 재사용 가능한 component를 만들 수 있다는 것 -> 즉, component를 계속 반복해 사용할 수 있음

실습

App.js

import React from 'react';

function Food({ fav }) {
  return <h1>I like {fav}</h1>;
}

function App() {
  return (
    <div className="App">
      <h1>Hello!</h1>
      <Food fav="kimchi" />
      <Food fav="ramen" />
      <Food fav="cheeze" />
      <Food fav="milk" />
    </div>
  );
}

export default App;

<Food fav="kimchi" />의 fav와 function Food({ fav })의 fav 그리고 함수 안 {fav}는 일치해야 함.
함수에서 인자로 { fav }대신 porps.fav도 가능함

#2.2 Dynamic Component Generation

이전에는 <Food fav="kimchi" />로 일일이 복사해 불러와야만 했다면 map을 이용하면 쉽게 코드를 짤 수 있음.
-> map: javascript 함수. rendering을 수행. array로부터 내가 원하는 array를 전달해줌.

#2.3 map Recap

react의 element들은 유일해야하며 list 안으로 집어넣을 때 유일성을 잃어버림.
-> (해결) 각각 id 생성해주기
우리는 각각 다른 이름과 이미지 링크를 가지고 있다는 것을 알지만 react는 알지 못하기 때문에 명확하게 알려주어야 함.

➡ 여기서의 alt는 말하자면 사진에 대한 설명.

#2.4 Protection with PropTypes

(설치) npm i prop-types
prop-types: 전달받은 props가 내가 원하는 props인지 확인
(설치확인) package.js에서 ➡ 를 보면 확인 가능

Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number,
};

propTypes의 이름은 꼭 propTypes여야만 함

#3 STATE

#3.0 Class Components and State

(차이점)Function component는 함수이며 뭔가를 return하고 화면에 표시된다. class component는 class이며 react component로부터 확장되며 화면에 표시됨.
그리고 class component는 render() {}안에 들어가야 함. react는 자동적으로 class component의 reder method를 실행.

state?
:object이며 component의 data를 넣을 공간이 있으며 이 data는 변함.
즉, 내가 바꾸고 싶은 데이터를 state = {};에 넣으면 됨.

실습시 주의사항

  <button onClick={this.add()}></button>과
  <button onClick={this.add}></button>의 차이는?

➡ ()는 즉시 실행. 하지만 실습에서는 click된 순간 실행되도록 하고싶으므로 add()❌ add⭕

코테 끝나고 더 듣고 더 적어놓고 자야지😴