React Props, Event, , useState, useEffect

1. Props

자식에게 부모가 넘겨주는 값.(단, 자식에서는 그 값을 변경할 수 없고 읽기만 가능함.)

import Children from "./Children";

function App()  {
/*부모 컴포넌트*/
  return (
    <div className="App">
      <Children name="test" aaaaa="asdasd" />
    </div>
  );
}

export default App;

import React from "react";
/*자식 컴포넌트*/
const Children = ({ name, aaaaa }) => {
/*{}중괄호가 props 역할을 대신함.*/
  return (
    <div>
      {name} {aaaaa}
    </div>
  );
};

export default Children;

2. Event

2-1 주의사항

1. 이벤트 이름은 카멜 표기법으로 할 것
2. 이벤트에 싱핼할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달함.
3. DOM요소에만 이벤트를 설정할 수 있음.
-> 컴포넌트에는 자체적으로 이벤트를 설정 할 수 없음.

2-2 이벤트 종류

https://reactjs.org/docs/events.html <- 참고

3. useState

3-1. 배열 비구조화 할당

const array = [1, 2]
const one = array[0]
const two = array[1]

배열 비구조화 할당 후 

const array = [1, 2]
const [one, two] = array

-> array에 있는 값을 one, two에 할당함

3-2. useState 사용 예시

import React from "react";
import { useState } from "react";

const State = () => {
  const [message, setMessage] = useState(""); /*message 기본값을 공백으로 둠*/
  const onClickHello = () => setMessage("안녕하세요"); /*해당 함수가 실행시 setMessage 값을 "안녕하세요"로 바꿈*/
  const onClickBye = () => setMessage("안녕히가세요");  /*해당 함수가 실행시 setMessage 값을 "안녕히가세요"로 바꿈*/

  const [color, setColor] = useState("black");

  return (
    <div>
      <button onClick={onClickHello}>입장</button>
      <button onClick={onClickBye}>퇴장</button>
      <h1 style={{ color }}>{message}</h1>
      <button style={{ color: "red" }} onClick={() => setColor("red")}>
        빨간색
      </button>
      <button style={{ color: "blue" }} onClick={() => setColor("blue")}>
        파란색
      </button>
      <button style={{ color: "green" }} onClick={() => setColor("green")}>
        초록색
      </button>
    </div>
  );
};

export default State;

4. useEffect

4-1. useEffect : 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook