[React] props를 활용하여 조건문 만들어보기

목표

앞서 배운 props 를 응용하여 조건문을 만들어보자.

---

조건문 작성하기

저는 props 값이 true 일 때 '성공' 단어를, false 일 때 '실패' 단어가 나오도록 조건을 설정해보려 합니다.

//Prt2.js

import React from 'react';

function Fix1 (props){
    return <div>성공</div>
}

function Fix2 (props){
    return <div>실패</div>
}

function Prt2 (props){
    const Success = props.Success;
    if (Success) {
      return <Fix1 />
    }
      return <Fix2 />
};



export default Prt2;

Prt2.js 를 모두 작성하였습니다.

이제 Success 의 true, false 여부를 받아와야 이 함수가 완성이 됩니다.

props를 받아오기 전까지 이 컴포넌트는 계속 '실패' 값을 반복 할 것입니다!

컴포넌트에서 값 전달하기

//App.js

import Prt2 from './component/Prt2';

function App() {
  return (
    <div className="App">
      <div>
        <h2>Prt2.js</h2>
        <Prt2 Success={true} />
        //Success 값에 true, false 를 번갈아 넣어보세요.
      </div>
    </div>
  );
}

export default App;

결과물

실수

처음 함수를 작성했을 때 const success = props.success 로 작성하였더니 계속 false 값이 났습니다.

첫 글자를 대문자로 바꿔주어야 한다는 것을 깜빡 했다가 다시 바로 수정했고, 정상작동 했습니다.😅