Never call component functions directly!!

const conditionRender = (item: string) =>{
	switch(item){
    	case: 'A'
    	...
        return ..
    }
}

<Page>
  {conditionRender(item)}   // 이렇게 구현
</Page>

 

 

개인적으로 코드 작업시에 조건부로 렌더링해야할 때 위와 같은 방식을 사용하고는 했다. 조건에 따라서 보여줘야 하는 컴포넌트를 선택하는 컴포넌트 함수를 만들고 렌더링해야하는 부분에 { } 를 사용하여 해당 함수를 넣어주는 식으로 작업했다. 이렇게 되면 편히 상태에 따라 원하는 컴포넌트를 리턴해 줄 수 있었다. 

 

물론 이런 방법이  엄청난 에러가 발생하지는 않는다. 그랬다면 내 프로그램에 이미 난리가 났을 것이다. 하지만 이런 방식은 리엑트에서 권장하는 방법이 아니므로 수정해줘야 한다. React에서는 위와 같은 component function을 직접적으로 부르는 것을 금하고 있다. 공식 문서에서는 그냥 네버!!! 라고 강조하고 있다. 공식문서 링크는 아래 참고에 달려있다. 한번씩 읽어보길 권장한다. 해당 공식문서에서 말하는 부분은 이러하다. 

 

컴포넌트는 JSX만 사용하라고 권장한다. 이를 통해서 렌더링시에 React가 더 잘 관리하게 끔 할 수 있기 때문이다.

어떤 컴포넌트가 다시 렌더링이 필요한지 등의 결정이 쉽기에 재조정 과정이 훨씬 효율적이게 되는 것이다.  이전 글이었던 내용과 관련된 부분인것 같다. 해당 계산 과정을 온전히 React에 넘겨서 렌더링 계산을 효율적이게 만들려고 하는게 아닌가 싶다. (이전 글: https://choq.tistory.com/60)

 

그렇다면 코드는 어떻게 할까? 어렵지 않다. 해당 부분을 컴포넌트로만 수정해주면 된다.

const ConditionRender = (item: string) =>{
	switch(item){
    	case: 'A'
    	...
        return ..
    }
}

<Page>
  <ConditionRender item ={...} />   // 이렇게 수정
</Page>

 

 

 

 

 

참고 : https://react.dev/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly