React

요즘 웹개발의 트렌드는 필요한 기능을 컴포넌트에 만들어서 부품처럼 필요한 페이지에 가져다가 사용하는것이다. 대표적인 도구로는 Vue, React, Angular가 있다.

왜 React를 사용하는가

1. 가장 높은 사용량

• 블로그 등이 활성화 잘 되어있음
• 커뮤니티 활성화 잘 되어있음
• 물어보기 쉽고, 검색이 잘됨
• 취업/이직도 잘됨

2. All-In-One
   React.js는 웹
   React-Native는 앱
   React + Electron은 pc앱

React만 알아도 나머지는 약간의 공부로 다룰 수 있기 때문에 많이 사용한다.

---

Component란?

UI 또는 기능을 부품화 해서 재사용 가능하게 하는 것

원본만 바꾸면 되기에 유지보수에 용이하고 한번 만들어놓은 컴포넌트는 같은 폼에서 다시 재사용이 가능하다.

Component 작성 방법 2가지

1. 클래스형 컴포넌트
2. 함수형 컴포넌트
   

컴포넌트의 작성 방법에는 클래스형 컴포넌트와 함수형 컴포넌트가 있는데, 요즘은 다 함수형으로 사용한다.
편하고 가독성도 좋기 때문이다.

React Hooks

함수형은 클래스형과 동일한 기능을 사용할 수 없기에 이를 사용하도록 만들어주는 도구가 바로 Hooks이다.
대표적으로 많이 쓰는 Hooks에는 useState, useEffect가 있다.

//useState 사용해서 카운트 만들기

import { useState } from "react";

export default function CounterStatePage() {
  const [count, setCount] = useState(0);

  const onClickCountUp = () => {
    setCount((prev) => prev + 1);
  };

  const onClickCountDown = () => {
    setCount((prev) => prev - 1);
  };

  return (
    <div>
      <div>{count}</div>
      <button onClick={onClickCountUp}>카운트 올리기</button>
      <button onClick={onClickCountDown}>카운트 내리기</button>
    </div>
  );
}

자바스크립트의 event는 어떤 이벤트가 일어났는지 알려주는 것이고, event.target은 행위가 적용된 태그를 의미한다. 또 event.target.value는 작동된 태그에 입력된 값을 의미한다.

---

classQuiz