실전 TypeScirpt 5

어제 React Router코드를 분석을 하다가 다음과 같은 상황을 발견했다.

1. React Hook은 조건문이나 반복문 안에 작성하면 안된다.
2. return 안에서도 조건문을 넣어서 출력 여부를 결정해서는 안된다.

하지만 Hook을 사용하는 컴포넌트를 출력하는 대신 null을 출력해도 위의 조건에 위배되지 않았다.

그래서 다음과 같이 NullWrapper를 만들어 보았다.

import { useState, useEffect } from 'react';

function NullWrapper({ visible, children, props }) {
  return (
    visible 
      ? children(props)
      : null
  )
}

function ComponentA(props) {
  const [a, setA] = useState(0);

  return <div>여기는 A입니다</div>;
}

function App() {
  return (
    <NullWrapper visible={false}>
      <ComponentA />
    </NullWrapper>
  );
}

export default App;

왜냐면 전에는 무조건 호출이 되도록 해야하는줄 알고,
CSS로 display: none처리를 시켰다.

물론 CSS로 처리하는게 더 빠르다고 한다.

https://stackoverflow.com/questions/24502898/show-or-hide-element-in-react

Show or hide element in React

이런 방법도 있다는걸 알면 좋을 것 같다.

하지만 여기서 멈출수 없지!
CSS를 적용한 방식을 만들어 봤다.

// App.js
import './App.css';
import ComponentA from './ComponentA';
import React from 'react';

function NullWrapper(props) {
  const { visible, children, ...etc } = props;

  const childrenWithProps = React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { ...etc });
    }
    return child;
  });

  return (
    <div className={visible ? "" : "hidden"}>
      {childrenWithProps}
    </div>
  )
}

function App() {
  return (
    <NullWrapper visible={false} abc={1}>
      <ComponentA />
      <ComponentA />
    </NullWrapper>
  );
}

export default App;

// App.css
.hidden {
  display: none;
}

TypeScript 버전

import React, { PropsWithChildren } from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({ 
  visible: { all: 'inherit' },
  hidden: { display: 'none' },
})

const NullWrapper:React.FunctionComponent<{ visible: boolean }> = ({ visible, children, ...etc }) => {
  const classes = useStyles();
  
  const childrenWithProps = React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { ...etc });
    }
    return child;
  });
  
  return (
    <div className={visible ? classes.visible : classes.hidden}>
      {childrenWithProps}
    </div>
  );
}

export default NullWrapper;

---

childrenWithProps 출처

https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children

How to pass props to {this.props.children}