활성화 버튼을 만들어보자!

Emotion 파일에도 props를 활용하여 css를 변경할 수 있다. 이때 container에서 만들어진 js가 presenter로 props되고, 이후 presenter에서 다시 styles로 props된다.
이를 props drilling이라 하며 부모에서 자식으로, 다시 부모에서 자식으로 가는 구조를 일컫는다.

1. container 파일에서 js 작성

import Presenter from "./Presenter"

export default function Container() {
  	
  	const [isActive, setIsActive] = useState(false)
  
    function onChangeWriter(event) {
        setWriter(event.target.value)

        if (event.target.value) {
            setIsActive(true)
        }
    }

	return (
		<div>
        	<Presenter
            onClickSubmit = {onClickSubmit}
            />
		</div>
	);
}

2. presenter로 props!

import { BlueButton } from "./styles";

export default function Presenter(props){

	return (
        <div>
           <BlueButton
				onClick={props.onClickSubmit}
				isActive={props.isActive}
			>GRAPHQL-API 요청하기</BlueButton>
        </div>
	);
}

3. 다시 styles로 props!

import styled from '@emotion/styled';

export const BlueButton = styled.button`
    background-color: ${(props) => (props.isActive ? "yellow" : "")}
`

onClick 뿐만 아니라 onMouseOver / onMouseLeave 등 태그에서 on으로 시작되는 속성을 활용하여 더욱 다양한 활용이 가능하다.

true / false 뿐만 아니라 String, Number 타입도 모두 전달할 수 있다.

---

setState의 원리!

setState는 기존과 비교하여 새로운 값으로 html 구조를 화면을 다시 그림 이를 re-render한다고 표현한다.

다만 같은 함수 안에 같은 값이 여러번 변경된다면, 그 변경된 값을 임시공간에 저장 후 마지막에 함수가 끝날 때 최종적으로 들어온 값을 꺼내와서 화면에 다시 그린다.