렌더링/조건부렌더링

렌더링

렌더링

각종 UI/Design/graphic 등을 화면에 그리는것을 말함

조건부 렌더링

data && data.~
옵셔널 체이닝(조건부 랜더링에 속한다.)
data?.~

	data && data.fetchProfile

같은 의미를 가지며 거짓(false)이면 data를 그려주고 참(true)이면 data.~을 렌더링 해준다.

삼항연산자를 이용하여

	data ? data.fetchBoard.wiriter : <div>없을시</div>

같은 방식으로 데이터가 있을경우 data.fetcBoard.wiriter을
없을시 엔 : 이후를 보여준다.

	data || data.fetchBoard.wiriter

의 경우엔 반대로 참일경우 앞의것이
거짓일경우 뒤쪽 부분이 렌더링 된다.

nullish-coalescing
nullish = null,unedfined를 의미

	data ?? data.fetchProfile

null or undefined 일 때만 data.fetchProfile를 랜더링해준다.

참과 거짓 판별에 있어 빈문자열 ""은 거짓이 되지만 " " 공백이라도 들어가면 참이된다.

setState의 동작원리

 const onChangeContents = (event) =>{
        setMyContents(event.target.value)

        if(mywriter !== "" && mytitle !== "" && mycontents !== ""){
            setIsActive(true)
        } else(
            setIsActive(false)
        )
    }

위와 같은 함수가 있다면, setMyContents(event.target.value)에 값을 입력받았다해도
mycontents에 바로 값이 들어가지않고 onChangeContents 함수가 끝날 때 mycontents에 입력받은 값이 적용되기 때문데 바로 mycontents에 입력받은 값이 반영되지 않는다.
따라서

	if(mywriter !== "" && mytitle !== "" && mycontents !== ""){
            setIsActive(true)
        } else(
            setIsActive(false)
        )

부분은 함수가 한번 끝날때 까지 그대로 남게된다.

이는 state의 다시그려주는 기능 때문인데 이를 리렌더링이라한다.

	const onChangeContents = (event) =>{
        setMyContents(event.target.value)

        if(mywriter !== "" && mytitle !== "" && event.target.value !== ""){
            setIsActive(true)
        } else(
            setIsActive(false)
        )
    }

코드를 위처럼 다시 작성해주면 mycontents란 장소의 값이아닌
event.target.value 즉 현재 입력한 값을 바로 가져오기 때문에 실적용이 바로 가능하다.