<"render() 함수 내부에 함수 컴포넌트를 정의하는 것은 안티 패턴인가요?">
<"render() 함수 내에서 함수 컴포넌트를 정의하는 것은 개발자들이 자주 마주치는 상황입니다. 하지만 이것이 안티 패턴인지 여부는 특정 사용 사례와 컴포넌트에 대한 잠재적인 영향에 따라 달라집니다.">
<"render() 내부에 함수 컴포넌트를 정의하는 문제점">
<"일반적으로, render() 함수 내부에 함수 컴포넌트를 정의하는 것은 권장되지 않습니다. 이는 React의 재조정(reconciliation)이라는 diffing 알고리즘이 컴포넌트 식별자를 사용하여 기존 하위 트리를 업데이트 할 지 새로운 하위 트리를 마운트 할 지를 결정하기 때문입니다. 만약 render에서 반환된 컴포넌트가 이전 렌더링에서 반환된 컴포넌트와 동일(===)하다면, React는 하위 트리를 재귀적으로 업데이트합니다. 하지만, 동일하지 않다면 이전 하위 트리는 완전히 언마운트됩니다. 이는 성능 문제와 원하지 않는 부작용을 일으킬 수 있습니다.">
<"게다가, 컴포넌트를 언마운트하면 해당 컴포넌트와 그의 모든 자식들의 상태가 손실됩니다. 이는 새로운 컴포넌트가 React 트리에 표시되지만 어떤 상태도 유지하지 않고, componentDidMount, componentWillUnmount, useEffect와 같은 라이프사이클 메서드가 모든 렌더링 주기마다 항상 호출된다는 것을 의미합니다. 이는 예상치 못한 동작을 일으킬 수 있으며 코드의 추론이 어려워질 수 있습니다.">
<"대안적인 접근 방식">
<"render() 내부에 함수 컴포넌트를 정의하는 것은 단점이 있지만, 부작용이 있는 문제를 피하고 원하는 동작을 달성하는 데 도움이 되는 대안적인 접근 방식이 있습니다.">
<"1. 함수 컴포넌트 추출">
<"함수 컴포넌트를 인라인으로 정의하는 대신, 이를 별도의 파일로 추출하거나 부모 컴포넌트 정의 위에 정의할 수 있습니다. 이렇게 하면 렌더링 사이에 컴포넌트 식별자가 변경되는 문제를 피할 수 있습니다.">
const MyFuncComponent = ({ prop1, prop2 }) => {
// 코드 작성
}
const MyComponent = () => {
return (
<div>
<MyFuncComponent prop1={something} prop2={else} />
</div>
);
};
<"2. 컴포넌트 내부에서 일반 함수 사용">
<"부모 컴포넌트 내에서 함수 컴포넌트를 정의해야 하는 경우, 일반 함수를 사용할 수 있습니다. 이렇게 하면 함수 자체가 React 트리에 새로운 컴포넌트로 표시되지 않고, 둘러싼 범위의 변수에 액세스할 수 있습니다.">
const MyComponent = (props) => {
const MyFuncComponent = ({ prop1, prop2 }) => (
<div>
{/* 코드 작성 */}
</div>
);
return (
<div>
<MyFuncComponent prop1={something} prop2={else} />
</div>
);
};
<"3. 조건문이나 map 콜백 내부에서 인라인 JSX 사용">
<"함수 컴포넌트가 조건문이나 map 콜백 내에서 사용되는 경우, JSX를 인라인으로 작성하는 것이 적합할 수 있습니다. JSX를 인라인으로 작성하면 코드가 간소화되고 별도의 컴포넌트를 정의할 필요가 없어집니다.">
const MyComponent = (props) => {
return (
<div>
<ul>
{props.list.map(({ something, thing }) => (
<li>
{something} {thing} {/* 다른 코드 */}
</li>
))}
</ul>
</div>
);
};
<"결론">
<"render() 함수 내에서 함수 컴포넌트를 정의하는 것은 기술적으로 가능하지만, 성능 문제와 상태 손실의 잠재적인 문제 때문에 일반적으로 안티 패턴으로 간주됩니다. 위에서 언급한 대안적인 접근 방식을 따르는 것이 더 예측 가능하고 유지 관리하기 좋은 컴포넌트 구조를 보장하기 위해 권장됩니다.">
<"더 나은 관행과 대안적인 솔루션을 선택함으로써 React 컴포넌트의 전체적인 성능과 유지 관리성을 개선할 수 있습니다.">
