React props 및 동적 컨텐츠 작업

모든 함수 컴포넌트의 parameter(매개변수) => props

props는 자바스크립트 객체이다.

App.js

import Todo from './components/Todo';

function App() {
  return (
    <div>
      <h1>My Todos</h1>
      <Todo text='Learn React' />
      <Todo text='Master React' />
      <Todo text='Explore the full React course' />
    </div>
  );
}

export default App;

text=''같은 속성들이 props 객체 안 key-value 쌍으로 사용된다.

• 이 경우 text는 key가 되고 Learn React는 value가 된다.

Todo.js

function Todo(props) {
  return (
    <div className="card">
      <h2>{props.text}</h2>
      <div className="actions">
        <button className="btn">Delete</button>
      </div>
    </div>
  );
}

export default Todo;

표준 자바스크립트에서는 객체 속성을 점 표기법으로 사용한다.

<h2>{props.text}</h2>
props 객체의 text 속성에 접근해서 그 속성에 지정된 값을 가져온다.

{} 안 텍스트는 단순 텍스트가 아닌 자바스크립트로 인식한다.

• 한 줄 표현식은 가능하지만, Block문은 작성할 수 없다. => if문도 사용할 수 없다.

Event

function Todo(props) {
  function deleteHandler() {

  }
  
  return (
    <div className="card">
      <h2>{props.text}</h2>
      <div className="actions">
        <button className="btn" onClick={deleteHandler}>Delete</button>
      </div>
    </div>
  );
}

export default Todo;

onClick 속성 : 클릭했을 때, {} 안 함수가 실행된다.

• {} 안 함수는 익명의 인라인 함수, 화살표 함수 등 사용해도 된다.

주의
다른 함수를 지정할 때, onClick={deleteHandler()} 이렇게 작성하면 안된다. 코드 검증할 때 실행되어 버리기 때문. 꼭 ()를 빼도록 하자