[21/10/23] React Architecture

이 글을 보고 정리해보았습니다.

라이프사이클 메소드와 다른 useEffect

useEffect -> 최초렌더링, deps 요소 변경 시 콜백 호출된다. componentDidUpdate를 구현하고 싶다면 사용자 훅을 만드는 과정이 필요하다.

const useCustomEffect=()=>{
  // 재실행에도 초기화 x, 유지되는 로컬 변수(변경가능한객체)
 	const didMountRef = useRef(false);
  
  const {
    didUpdate=true,
    didMount=true
  }
  
  useEffect(()=>{
    if(didMountRef.current === false){
      // mount가 되었는지를 점검
      
      
      didMountRef.current = true;
      // mount가 되었으므로, 다시 마운트 로직 할 필요없다. true
      
      // didMount가 false라면 업데이트만 하고 싶은 상황
      if(didMount){
       	effectFunction(); 
      }
	    return ;

    }
    
    if(didUpdate){
     	effectFunction(); 
    }
  },deps)
}

React Hook Flow Diagram

1. 돔을 업데이트 하고 ->
2. layoutEffect를 실행하고 ->
3. 돔을 보고 브라우저가 페인트한다 ->
4. effect의 클린업이 실행되면 ->
5. effect가 실행된다.

useLayoutEffect는 돔 조작이 필요한 경우 사용하면 된다.

돔이 다 업데이트된 이후에 돔을 조작해야한다면,

useEffect가 아닌 useLayoutEffect에 구현해야 

로직이 수행된 결과물을 볼 수 있다.

컴포넌트의 합성과 조합

props에 컴포넌트를 전달하여 전달받는 컴포넌트에 제어권을 위임하여 컴포넌트를 조합할 수 있다.

하지만 이 방식의 경우 props 값의 추가가 필요하며, 전달받는 컴포넌트에서의 if로직이 더 길어짐, 내부에서 또 한번의 component tree가 만들어지기에 depth가 깊어진다.

리액트는 children 이라는 속성으로 컴포넌트를 전달하여 합성할 수 있다. 부모 컴포넌트에게 합성될(렌더링 될)컴포넌트의 제어권이 주어진다. component depth가 일관되게 유지된다.

대신 한번에 여러개의 컴포넌트를 합성하는 경우 children으로 모조리 들어가기에 레이아웃에 제약이 걸린다.