[유데미(udemy) - React CleanCode] Components

Fragment 지향하기 

Fragment를 사용하는 이유, 지향해야 하는 이유? 

- 단일 형태의 노드를 내보내야 하는 React에서의 JSX 활용에 대한 규칙 때문에 

- 실제 런타임에 장착되고 마운트되고 그려지는 컴포넌트는 비용이 드는데, Frament는 런타임에서 날라가서 비용이 들지 않음. 

 

DOM에 별도의 노드를 추가하지 않고, key를 바인딩하는 경우 사용하기 용이함. 

function ShortCutFragment(items): Element {
	return(
    	<dl>
        {items.map(({id, term, description}):Element => (
        	<React.Fragemnt key={id}>
            	<dt>{item.term}</dt>
            	  </React.Fragment>
        ))}
        </dl>
     );
  }

Fragment 지양하기 

굳이 사용할 필요 없는 경우에는 제거.

 

불필요한 경우 예시 

 

그냥 문자열만 return해도 됨. 

function StringRender(): Element {
	return <>Clean Code React </>;
}

 

function Example() : Element {
	return <><div className="main-container">...이하 생략 </div></>
    }

 

 

function ConditionalRenderingExample({ isLoggedIn }): Element {
	return( 
    	<div>
        	<h1>{isLoggedIn ? 'User' : <></><h1> // 굳이 <></>로 return할 필요 없음 
            <h1>{isLoggedIn ? 'User' : null<h1> 
        	{isLoggedIn && <h1>User</h1>} // h1 태그도 렌더링이 꼭 되어야하는 경우에만 렌더링 되도록.  
        </div>
        );
        }

 

JSX 컴포넌트 함수로 반환 

JSX 컴포넌트 함수로 반환 시 생길 수 있는 문제점 

1. scope를 알아보기 어렵다. 

2. 반환 값을 바로 알기 어렵다. 

3. props 전달 등 일반적인 패턴이 아니다. 

컴포넌트 내부의 inner 컴포넌트 선언 

컴포넌트 내부의 inner 컴포넌트 선언 시 생길 수 있는 문제점 

1. 결합도 증가 

- 구조적으로 스코프적으로 종속된 개발이 된다. 

- 나중에 확장성이 생겨서 분리될 때 굉장히 힘들어짐. 

2. 성능 저하 

- 상위 컴포넌트 리렌더? => 하위 컴포넌트 재생성 

displayName 

익명함수를 디버깅하는 데에 중요한 요소 (react devtool에서) 

const InputText = forwardRef((props, ref) : Element => {
	return <input type="text" ref={ref} />;
});

InputText.displayName = 'InputText';

 

const withRouter = (Component) => {
 const WithRouter = (props) : Element => {
 	const location = useLocation();
    const navigate = useNavigate();
    
    return (
    	<Component 
        	{...props}
            location={location}
            navigate={navigate}
         />
         );
       };
}
WithRouter.displayName = Component.displayName ?? Component.name ?? 'WithRouterComponent'

 

컴포넌트 구성하기 

정답은 없음. 일관성 있게 규칙을 만드는 것이 좋음! 

 

ex) 컴포넌트에 위치시키는 순서  

1. flag성 변수 / Ref

2. useLocation, useQuery 등의 third party 라이브러리 hook 활용 상단에 

3. custom hook 

4. useState (컴포넌트 내부 상태) 

5. 이벤트 

6. early return 등등 ... 

 

useEffect 를 early return 보다 나중에 쓰면 오류나지않나? 

useEffect는 어디에 놓는 게 좋을까? 컴포넌트 상단? 하단?