Props

• 외부로 전달 받은 값
• immutable Data, 변하지않는 데이터로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨줄 때 사용
• 읽기 전용

1.사용

1) 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의
2) props를 이용하여 정의된 값과 속성을 전달
3) 전달받은 props를 렌더링

function App() {
	return (
    	<Hello name = "react"/> //Hello라는 자식 컴포넌트
    )
}

function Hello(props) {
	return <div>
      	안녕하세요, {props.name} // 파라미터를 통해 props 객체 형태로 전달
      </div>
}

2.props.children

• 컴포넌트 태그 사이에 넣는 값을 조회하고 싶을 때 사용

function App() {
	return (
    	<Wrapper>
       		<Hello name="react" color="red/>
      		<Hello color="pink"/>
      	<Wrapper>
    )
}

function Wrapper({children}) {
	return (
    	<div style={style}>
      	{children}      
      </div>
    )
}

State

• 내부에서 변할 수 있는 값

1. useState : state 관리

const [state저장변수, state 갱신 함수] = useState(상태초기값)
//이 코드는 밑에와 같음
const state = useState(first);
const isCheck = state[0];
const isCheckCheck = state[1];

2. useEffect : 생명주기함수 이용

const [count, setCount] =useState(0)
useEffect(() => {
	'You clikced ${count} times';
  return (
  	<button onClick={() => setCount(count +1)}
  )
})

3. useReducer

useState보다 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 떄 사용하는 hook

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, 초기값);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}