React Study 002

컴포넌트 속성(props)

TestList.js (src > components )

function TestList ({text}) {
  return (
    <li>{text}</li>
  )
}

export default TestList;

App.js (src 폴더)

import TestList from "./components/TestList";
import './App.css';

function App() {
  const arr = ["python", "javascript", "react", 'node'];
  return (
    <div className="App">  //리액트에서 class는 예약어이므로 className 사용
      <ul>
        {arr.map((value) => {     //{}로 javascript 구문 작성할 수 있음
          return (
            <TestList text={value}></TestList>   
          )
        })}
      </ul>
    </div>
  );
}

export default App;

• App에서 TestList import했으나, 사실상 App에서 TestList로 엘리먼트 전달. TestList는 App에 의존적이라 할 수 있음
• App.js에서 return()에 html 구문 사용, 그 안에서 {표현식}로 javascript 구문 작성할 수 있음 (if문은 사용할 수 없으므로 삼항연산자 또는 && 활용)