React State, Props

• State는 Props처럼 App컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, props는 함수의 매개변수처럼 컴포넌트에 전달되는 반면, state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다는 차이가 있다.

• props를 사용했는데도 state를 사용하는 이유는 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있다.

setState()

• setState()는 컴포넌트의 state객체에 대한 업데이트를 실행한다.

• state가 변경되면 컴포넌트는 리렌더링 된다.

• setState 호출은 비동기적으로 이루어지므로 setState 호출 직후 새로운 값이 바로 반영되지 않으므로 setState에 객체 대신 함수를 넣어준다.

• setState는 이벤트 핸들러 내에서 비동기적이다. 이로 인해 부모와 자식이 모두 click이벤트에서 setState를 호출한다면 자식은 2번 렌더링 되지 않는다. 대신 react는 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트한다.

props

• 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수/함수

presenter에 container안에 있는 변수/함수들을 객체로 넘겨준다.

예제

Container부분

import BoardWriteUI from './BoardWrite.presenter'

export default function BoardWrite() {
	const [writer, setWriter] = useState()
    
    const handleChangeWriter = (event) => {
    	const writer..
        }
        }

return (
<BoardWriteUI aaa={handleChangeWriter} />
<BoardWriteUI bbb={writer} />
)

자동으로

props = {
	aaa: handleChangeWriter
}
props = {
	bbb: writer
}

가 생성되서 Presenter로 넘어간다.

Presenter에서

onChange={props.aaa}
onChange={props.bbb}	

를 작성하여 사용한다.

• 반대로 자식 컴포넌트가 부모 컴포넌트에게 변수나 함수를 넘겨줄 방법은 없다. 즉, 단방향이다.

• Presenter가 부모 컴포넌트가 되고 Emotin(CSS)이 자식 컴포넌트가 되서 넘겨줄 수 있다.

• Page > Container > Presenter > Emotion 식으로 부모 자식 컴포넌트가 형성된다.

Rendering

• 화면에 표시할 웹 페이지를 만드는 과정이다.

Rendering과정

• Loader가 서버로부터 불러온다
• HTML을 구조별로 분류(Phasing)하여 Dom-tree(Dom - 분석에 따른 구조)를 만든다.
• CSS를 구조별로 분류(Phasing)하여 CSSOM(CSS Object Model)-tree를 만든다.
• DOM-tree와 CSSOM을 결합하여 Rendering-tree를 만든다.
• Render-tree의 요소들의 크기와 위치를 계산해서 화면에 출력한다.