React 강의 3일차

컴포넌트란? JSX를 반환하는 함수??

작은 컴포넌트로 분할하는 것이 중요
모든 컴포넌트는 argument(인자)를 받음 -> props라고 부름
Props란? 일종의 방식이다
부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법

state 관련

React.useState는 배열을 반환하고
첫번째 값은 데이터를 의미 + 두번째 값은 데이터를 변환하는 함수를 의미

const [index, setIndex] = React.useState("0");

드랍박스로 변환기를 선택

function App() {
        const [index, setIndex] = React.useState("0");
        const onSelect = (event) => {
          setIndex(event.target.value);
        };
        return (
          <div>
            <h1>Super Converter</h1>
            <select value={index} onChange={onSelect}>
              <option value="0">Minutes & Hours</option>
              <option value="1">Km & Miles</option>
            </select>
            <hr />
            {index === "0" ? <MinutesToHours /> : null}
            {index === "1" ? <KmToMiles /> : null}
          </div>
        );

jsx에서 javascript 코드를 넣을때는 {}내부에!

function Btn({ banana }) {
        return (
          <button
            style={{
              backgroundColor: "tomato",
              color: "white",
              padding: "10px 20px",
              border: 0,
              borderRadius: 10,
            }}
          >
            {banana}
          </button>
        );
      }

하나의 컴포넌트에 다른 인자값을 통해 다른 결과 값을 도출

function Btn({ banana }) {
        return (
          <button
            style={{
              backgroundColor: "tomato",
              color: "white",
              padding: "10px 20px",
              border: 0,
              borderRadius: 10,
            }}
          >
            {banana}
          </button>
        );
      }

      function App() {
        return (
          <div>
            <Btn banaana="Save Changes" />
            <Btn banana="Continue" />
          </div>
        );
      }

'
'
'
'
'
뭔가 뒤죽박죽 정리가 안된느낌.... props / component / state 가 중요한 키워드!!