I am an amazing person.

2 분 소요

THE BASICS OF REACT

2.0 Introduction ~ 2.1 Before React

  • Vanilla JS 보다 React.js의 UI 가 훨씬 더 interactive 하다

  • ex) Vanilla JS에서 action을 취하려면?

    • HTML에서 < span >, < btn > 등 필요한 tag 생성
    • JS 에서 (getID, querySelector, .. ) 생성한 HTML의 tag를 가져와서
    • eventHandler를 달아서 action을 취한다

  • React 는 HTML script에 다음 코드를 삽입하여 설치할 수 있다. (지금은 쌩기초부터. 나중에 npm 을 이용해 설치할 것)

  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

2.2 Our First React Element

  • react js로 element를 추천하지 않는 방법으로 만들어보고, 추천하는 방법과 비교할 예정

  • React JS와 Vanilla JS는 작동 방식이 다르다

    • Vanilla JS
      1. HTML 을 먼저 만들고
      2. 그걸 JS로 가져온다.
      3. 수정이 필요하다면 HTML을 수정한다.
    • React JS
      1. 모든 것을 JS로 만들면
      2. 그것이 HTML이 된다. (즉, React는 HTML을 들락날락 할 필요가 없다는 장점이 있음)
  • React JS는 UI를 interactive 하게 만들어주는 library
  • React-dom 은 모든 react element를 html body에 두게 만듦

2.3 Events in React

  • React에서
    1. button을 만들고
    2. event를 감지해보자
      • Vanilla JS에서는 id를 통해 buttong을 구분했음
      • React에서는 그럴 필요가 없다는 것을 느껴보자
    const btn = React.createElement(
      "button",
      {
        onClick: () => console.log("im clicked"),
      },
      "click me"
결론
  • JS에서
    1. btn을 만들고
    2. property에 event listener를 등록할 수 있다!

2.5 JSX

  • 2.4는 Recap입니다

  • createElement를 대체할 수 있는 방법 -> JSX

const Title = React.createElement(
  "h3",
  {
    onMouseEnter: () => console.log("mouse enter"),
  },
  "Hello, I'm a title"
);
  • createElement로 react element를 생성한 경우
    • 필요한 요소를 기억하면서 생성해야하는 것이 조금 불편함
const Title = (
  <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
    Hello, I'm a title
  </h3>
);
  • JSX로 react element를 생성한 경우
    • html과 유사하게 생겼다 (가독성 ⬆)
    • browser는 jsx를 이해하지 못하기 때문에 변환 작업이 필요함.
    • babel을 이용하여 변환 (babel 말고도 다양한 방법 존재)
    • html과 혼용되지 않게 반드시 대문자로 시작

2.6 JSX part Two

  • 목표: createElement 대신 JSX를 써보자!
const container = React.createElement("div", null, [Title, Button]);
  • 이 코드와 같은 기능을 JSX로 작성해보자
  • 이때, Title 과 Button은 jsx 변수 이다.

  1. Title과 Button의 함수화

    • jsx 변수를 다음과 같이 곧바로 쓴다면?
    const Container = <div>Title Button</div>;

    => Title, Button을 JSX가 아니라, 그냥 div 안에 있는 text로 인식해버린다.

    => 따라서 Title, Button을 함수화(Component 화) 해야한다.

    function Title() {
  return (
    <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
      Hello, I'm a title
    </h3>
  );
}

  2. 직접 만든 Component는 반드시 대문자로 시작

    • 소문자로 하면 html tag 와 이름이 같은 경우, html로 인식함
    const Container = (
  <div>
    <Title /> <Button />
  </div>
);

ReactDOM.render(Container, root);

  3. container 또한 함수화시킨다

    const Container = () => (
  <div>
    <Title /> <Button />
  </div>
);
ReactDOM.render(<Container />, root);

참고