[TIL-187] MyView 프로젝트 - React props로 컴포넌트 전달 & text-transform

React props에 컴포넌트 전달할 때

function MyViewModal({breadcrumbs}) {
	...
    
  return (
    <MyModal open={open} onClose={closeModal}>
      <ReviewBox>
        <Step breadcrumbs={breadcrumbs}>{breadcrumbs}</Step>
      </ReviewBox>
    </MyModal>
  );
  
  	...
}

<MyViewModal/>이라는 컴포넌트 안에  breadcrumbs라는 props로 다른 컴포넌트를 받아서 렌더링해주고 싶었다.

 

import MyStep from './MyStep';

function AddReview({ open, setOpen }) {
	...
    
  return (
    <MyViewModal
      open={open}
      onClose={closeModal}
      movies={movies}
      nowRunning={movies}
      setSelected={setSelected}
      breadcrumbs={MyStep}		// 렌더링되지 않음...
    />
  );
  
  ...

그래서 이렇게 MyStep 컴포넌트를 import해서 <MyViewModal/>의 breadcrumbs props로 전달했는데 렌더링되지 않았다.

 

import MyStep from './MyStep';

function AddReview({ open, setOpen }) {
	...
    
  return (
    <MyViewModal
      open={open}
      onClose={closeModal}
      movies={movies}
      nowRunning={movies}
      setSelected={setSelected}
      breadcrumbs={<MyStep/>}		// 이제 렌더링됨
    />
  );
  
  ...

그래서 <MyStep/>을 온데다 갖다붙여서 확인해봤더니 다른 데서는 다 잘 렌더링됐다. 알고보니 props로 전달할 때 컴포넌트를 <MyStep/> 형태로 쓰지 않아서 생긴 문제였다. props에는 "변수"를 넘겨줘야한다 생각해서 JSX 문법의 표현인 <MyStep/>을 쓰면 안될 것 같고, import된 함수(형 컴포넌트)인 "MyStep"의 형태 그대로 전달해야 될거라 생각했던 것 같다. 하지만 props를 받은 쪽에서는 그 자리에 받은 값을 그대로 대입하므로 컴포넌트를 달랑 MyStep이라고 써두면 JSX 문법적으로 이해할 수 없으니 컴포넌트가 그려지지 않은 건 당연하다.

 

 

---

CSS in MUI

text-transform

MUI에서는 <Button/> 컴포넌트에 text-transform: uppercase;가 기본값으로 적용되어있는 듯하다. 그래서 소문자를 입력해도 대문자로 나온다. 버튼의 content가 소문자 그대로 출력되게 하고 싶으면 text-transform: none;을 해줘야 한다.

https://mui.com/material-ui/react-button/#customization 공식문서 해당 예제의 Bootstrap 버튼을 보고 이 속성을 찾아냈다.

• [참고] https://www.codingfactory.net/10656 CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성