React - 전개연산자, 조건문

전개 연산자 (...)

객체 내부의 모든 값을 props로 전달하는 방법

부모 컴포넌트

function Exam5() {
  const [userData, setUserData] = useState({ name: "김종조", age: 25 });

  return <MyComponent {...userData} setUserData={setUserData} />;
}

자식 컴포넌트

function MyComponent(props) {
  const { name, age, setUserData } = props;

  const oneYearLater = () => {
    setUserData({ name: "1살 더 먹은 김종조", age: 26 });
  };

  const content = `안녕하세요 저는 ${name} 이고, 나이는 ${age}세 입니다.`;
  return (
    <>
      <h3>{content}</h3>
      <button onClick={oneYearLater}>1년 후</button>
    </>
  );
}

---

조건문

부모 컴포넌트

function App() {
  return (
    <div className="App">
      <Exam6_1 isLogin={true} />
    </div>
  );
}

자식 컴포넌트 1

function Exam6_1(props) {
  const isLogin = props.isLogin; // 부모에게 전달받은 props중 isLogin 값을 변수에 담음

  return isLogin ? <h1>Welcome back!</h1> : <h1>Please sign up~!</h1>;
}

부모 컴포넌트에서 isLogin에 true를 받았기 때문에 Welcome back!이 들어있는 구문이 출력된다.

자식 컴포넌트 2

export function Exam6_2() {
  const numbers = [1, 2, 3, 4, 5];

  const listItems = numbers.map((number) => <li>{number}</li>);

  return <ul>{listItems}</ul>;
}

map : 배열에서 사용하는 js 내장 함수
-> 배열의 모든 요소에 대해 주어진 함수를 호출


map 한테 익명 함수를 줬다.

자식 컴포넌트 3

export function Exam6_3(props) {
  const handleClick = () => {
    alert("클릭됨");
  };

  return <button onClick={handleClick}>{props.label}</button>;
}

export default는 모듈에서 기본으로 내보내는(export) 하나의 값을 지정하는데 사용한다.
(export defula는 한 번만 사용할 수 있다.)

내보내는 컴포넌트가 여러개일 경우
기본적으로 내보내는 컴포넌트를 제외한
내보내려는 컴포넌트 앞에 export를 추가 작성한다.
그리고 import 구문에 기본 컴포넌트 , {추가할 컴포넌트 작성}