[20241105] Udemy 강의 (Section63 & Section25)

 

[ Section63 ] 프로퍼티 사용

 

617. 기본 프로퍼티 값 설정

 

(Die.jsx) 컴포넌트

export default function Die({ numSides = 5 }) {
  const roll = Math.floor(Math.random() * numSides + 1);
  return <h2>Die Roll: {roll}</h2>;
}

=> 인자로 받는 numSides에 기본값 '5' 설정

 

(App.js) 최상위컴포넌트

import Die from "./Die";


export default function App() {
  return (
    <div className="App">
      <Die />
      <Die numSides={5}/>
    </div>
  );
}

=> numSides 값을 전달하지 않으면 기본값 '5' 적용.

 

---

 

618. 배열 및 오브젝트 전달

 

(ListPicker.jsx) 컴포넌트

export default function ListPicker({ values }) {
  const ranIdx = Math.floor(Math.random() * values.length);
  const randElement = values[ranIdx];
  return (
    <div>
      <p>The list of values: {values}</p>
      <p>Random element is: {randElement}</p>
    </div>
  );
}

=> values로 전달받은 배열에서 랜덤인덱스(ranIdx)의 값(randElement)을 가져와 출력.

 

(App.js) 최상위컴포넌트

import ListPicker from "./ListPicker";

export default function App() {
  return (
    <div className="App">
      <ListPicker values={[1, 2, 3]} />
      <ListPicker values={["a", "b", "c"]} />
    </div>
  );
}

=> props로 배열 전달.

 

아래처럼 출력!!

 

 

---

 

 

619. 리액트 조건문

 

(App.js) 최상위컴포넌트

import DoubleDice from "./DoubleDice";

export default function App() {
  return (
    <div className="App">
      <DoubleDice />
      <DoubleDice />
      <DoubleDice />
    </div>
  );
}

 

(DoubleDice.jsx) 컴포넌트

export default function DoubleDice() {
  const num1 = Math.floor(Math.random() * 3) + 1;
  const num2 = Math.floor(Math.random() * 3) + 1;
  if (num1 == num2) {
    return (
      <div>
        <h2>WIN!</h2>
        <p>Num1: {num1}</p>
        <p>Num2: {num2}</p>
      </div>
    );
  }
  return (
    <div>
      <h2>LOSE!</h2>
      <p>Num1: {num1}</p>
      <p>Num2: {num2}</p>
    </div>
  );
}

=> 조건에 따라 return하는 컴포넌트의 다른점은 h2의 메시지뿐!!!

 

(1) 중복되는 h1을 변수로 지정 => 조건에 따라 다른 메시지 표시

export default function DoubleDice() {
  const num1 = Math.floor(Math.random() * 3) + 1;
  const num2 = Math.floor(Math.random() * 3) + 1;
  const result = num1 == num2 ? "WIN!" : "LOSE!";
  return (
    <div>
      <h2>{result}</h2>
      <p>Num1: {num1}</p>
      <p>Num2: {num2}</p>
    </div>
  );
}

 

(2) 조건에 따라 다른 메시지 표시 (삼항연산자)

export default function DoubleDice() {
  const num1 = Math.floor(Math.random() * 3) + 1;
  const num2 = Math.floor(Math.random() * 3) + 1;
  return (
    <div>
      <h2>{num1 == num2 ? "WIN!" : "LOSE!"}</h2>
      <p>Num1: {num1}</p>
      <p>Num2: {num2}</p>
    </div>
  );
}

 

(3) 조건에 따라 컴포넌트 표시 (삼항연산자)  __ 대체옵션X인 경우

export default function DoubleDice() {
  const num1 = Math.floor(Math.random() * 3) + 1;
  const num2 = Math.floor(Math.random() * 3) + 1;
  return (
    <div>
      <h2>Double Dice</h2>
      {num1 == num2 ? <h3>WIN</h3> : null}
      <p>Num1: {num1}</p>
      <p>Num2: {num2}</p>
    </div>
  );
}

 

(4) 조건에 해당하면 컴포넌트 표시 (&&연산자)  __ 대체옵션X인 경우

export default function DoubleDice() {
  const num1 = Math.floor(Math.random() * 3) + 1;
  const num2 = Math.floor(Math.random() * 3) + 1;
  return (
    <div>
      <h2>Double Dice</h2>
      {num1 == num2 && <h3>WIN</h3>}
      <p>Num1: {num1}</p>
      <p>Num2: {num2}</p>
    </div>
  );
}