폴더 구조 : container / presenter

container = JavaScript / presenter = HTML

[Props]

파일을 연결한다해도 데이터까지 연결되지 않으므로 사용

container에서 present로 함수 & 변수 export

    return(
        <BoardWriteUI
            onChangeName={onChangeName}
            onChangePassword={onChangePassword}
            onChangeTitle={onChangeTitle}
            onChangeContent={onChangeContent}
            nameError={nameError}
            passwordError={passwordError}
            titleError={titleError}
            contentError={contentError}
            check={check}
            buttonColor={buttonColor}
        />
    )

present에서 함수 & 변수 import

export default function BoardWirteUI(props){
    return (
        <>
            <Title zzz={props.zzz}>컨테이너 프리젠터 패턴</Title>
            작성자: <input type="text" onChange={props.onChangeMyWriter} /><br />
            제목: <input type="text" onChange={props.onChangeMyTitle} /><br />
            내용: <input type="text" onChange={props.onChangeMycontents} /><br />
            <Mybutton onClick={props.aaa} qqq={props.qqq}>GRAPHQL-API 요청하기</Mybutton>
        </>
    )
}

props를 선언해주고 사용하려는 함수명 앞에 props.을 추가

State의 속성

- state가 변화 할 때마다 값을 넣어주는 것이 아니라 '효율성'을 위해 한번에 전달

<< 따라서, 즉각적인 변화를 위해선 State의 값이 아니라 value를 이용하는 게 좋음 >>

    function onChangeMyWriter(event) {
        setMyWriter(event.target.value)
        if(event.target.value !== "" && myTitle !== "" && myContents !== ""){
            setQqq(true)
        }
        else{
            setQqq(false)
        }
    }

event.target.value를 이용해 즉각적으로 값이 바뀌게 한다.

버튼 색 바꾸기

container에서 State 선언, default 값으로 false ->
props를 사용해 State를 presenter로 이동 ->
presenter에서 버튼에 State변수를 대입 ->
styled에서 삼항연산자를 사용해 State변수가 '참'이면 yellow, '거짓이면' grey 선언