(React) 컴포넌트 import, export 사용시 주의

이렇게 export 할 경우

export function HelloProps(props) {
  return (
    <div>
      <p>
        my name is {props.name} and age is {props.age}
      </p>
      <strong>you are {props.someFunc()}</strong>
      <p>this is someArr {[...props.someArr]}</p>
      <p>this is someObj {props.someObj.one}</p>
      {props.someJSX}
    </div>
  );
}

이렇게 import

import { HelloProps } from './components/HelloProps';

---

반대로 이렇게 export 할 경우

• 이런 경우는 export default한 Hello만 내보내겠다는 뜻

function HelloProps(props) {
  return (
    <div>
      <p>
        my name is {props.name} and age is {props.age}
      </p>
      <strong>you are {props.someFunc()}</strong>
      <p>this is someArr {[...props.someArr]}</p>
      <p>this is someObj {props.someObj.one}</p>
      {props.someJSX}
    </div>
  );
}

function Hello(props) {
  //const name = '라이캣!';
  const someStyle = {
    backgroundColor: 'black',
    color: 'white',
  };
  return (
    <div>
      <h1 style={someStyle}>안녕, {props.name} 1호</h1>
      <div className="newClass" />{' '}
    </div>
  );
}
export default Hello;

이렇게 import

import Hello from './components/Hello';

props는 전체 다 전송 가능(아래의 방식으로 보내고 위의 코드처럼 사용하면 됨)

 'hello!!'}
        someJSX={
          
        }
        someArr={[1, 2, 3]}
        someObj={{ one: 1 }}
      />
 

props에 여러가지여도 한번에 감

<Resume
        hello="안녕하세요"
        name="보성"
        hobby="게임"
        food="생선"
        color="blue"
      />
      
 export function Resume(props) {
  return (
    <div>
      <h1>{props.hello}</h1>
      <h2>{props.name}의 자기소개서</h2>
      <h2>취미: {props.hobby}</h2>
      <h2>좋아하는 음식: {props.food}</h2>
      <h2>
        좋아하는 색:{' '}
        <span style={{ color: props.color }}>
          {props.color}
        </span>
      </h2>
    </div>
    // props를 써서 지금 하나씩 했지만 그냥 하나씩 다 받아서 사용해도 됨
    // Resume(hello, name, hobby, food, color) 이런식으로
  );
}