사용하는법

---

step0: Elements

• element는 component의 구성요소, 즉 React앱의 가장 작은단위이다.

• element는 아래와 같이 JSX로 작성해준다.
  const element = <h1>Hello, world</h1>;
  
  

step1: Components

• 화면에 그리고싶은 것을 state(=JS함수, 객체)로 표현해준다.

• 아래는 함수형 컴포넌트의 기본형태이다.

  export default function Component() {
    return (
     <p>기본 컴포넌트 형태</p>
    );
  }

step2: Custom Tag

• ComponentName은 대문자로 시작하고, 커스텀태그로 사용될 수 있다.

• 아래에서 Counter컴포넌트는 App컴포넌트의 커스텀태그로 사용되고 있다.
  

step3: Props

• 데이터를 가진 객체 인자

• <Button> insert </Button>
  위의 형태로써, Button컴포넌트는 Numeric컴포넌트로부터 i라는 props를 전달 받고있다.

• Button컴포넌트가 받은 i라는 props를 콘솔 해보면,
  

• 아래와 같이 children값이 나오는 걸 볼 수 있다. 이 값을 Button컴포넌트에서 활용해준 것이다!
  

• <Button insert /> 의 insert는
  key(attributeName)=value({함수명}, {변수명})의 형태로 집어넣어주어서, props로써 attributeName을 받도록 해준다.
  
  

step4: ReactDOM과 Element Rendering

• 최종적으로 element를 그려줄때 ReactDOM의 render() 함수를 이용한다!

• 아래 예시는 HTML파일에 <div id="app"></div>가 있을때를 가정한다.
  
  
  

React Hook - useState

---

Goal
위에서 배운 함수 컴포넌트에서 React state와 생명주기 기능을 연동

What - useState는 무엇인가

• class안에서는 동작하지 않지만, class없이 React를 사용할 수 있게 해준다.

• React 내장 hook의 한 종류이다. hook을 직접 만드는 것도 가능하다!

• 객체 object를 함수 컴포넌트안에서 사용함으로써,
  const(불변객체)를 바꿔주는 작업을 하고, return으로 선언한대로 그려줄 수 있다.
  
  

HOW

아래의 식에서,

• count를 state 변수로써 선언가능하며, React에 의해 이건 함수가 끝나도 사라지지 않음!
  REF: const [state, setState] = useState({ count: 0 });
  {count: 0} 오브젝트가 초기값이 되며, 이건 이 안에 갖혀서 쓰는 형태 이므로 다른 컴포넌트 혹은 전역변수로도 접근할 수 없다.

• useState() -> ()안에는 인자(argument)로 state 초기값이 숫자 혹은 문자 type으로 들어간다.

• 반환값(return) -> state 변수, 해당 변수를 갱신할 수 있는 함수 2가지를 반환한다. (아래에서는 count,handleClick함수를 각각 Counter컴포넌트로 반환해주고 있다.)
  
  
  

관심사의 분리

---

컴포넌트를 관심사별로 분리해서 재사용과 확장성을 높여준다.

아래의 식에서,

• 상태를 관리하는 것 -> App컴포넌트

• 화면에 그려주는 것 -> Counter컴포넌트