React Basic 검토

1. 요소 대 구성 요소

  ReactDOM.render(<App />, appDOM)
const app = (
  <div>
    <Title>{counter}th cat meme</Title>
    <CatForm handleFormSubmit={handleFormSubmit} />
    <MainCard img="https://cataas.com/cat/595f280b557291a9750ebf65/says/JavaScript" />
    <Favorites />
  </div>
);

const appDOM = document.querySelector('#app');

ReactDOM.render(app, appDOM)

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

const App = () {

  const [counter, setCounter] = React.useState(100);

  function handleFormSubmit() {
    // function
  }

  return(
    <div>
      <Title>{counter}th cat meme</Title>
      <CatForm handleFormSubmit={handleFormSubmit} />
      <MainCard img="https://cataas.com/cat/595f280b557291a9750ebf65/says/JavaScript" />
      <Favorites />
    </div>
  )
};

const appDOM = document.querySelector('#app');

ReactDOM.render(<App />, appDOM)

2. 목록의 각 하위 항목에는 고유한 키 소품이 있어야 합니다.

Warning: Each child in a list should have a unique "key" prop.

Check the render method of Favorites. See https://reactjs.org/link/warning-keys for more information.
at CatItem (:70:45)
at Favorites
at div
at App (:99:31)

  <ul className="favorites">
    {
      cats.map(cat => <CatItem img={cat} />)
    }
  </ul>

  <ul className="favorites">
    {
      cats.map(cat => <CatItem img={cat} key={cat} />)
    }
  </ul>

3. useState로 생성된 목록에 새 항목을 추가하는 방법

function Favorites() {
  const [favorites, setFavorites] = React.useState([CAT1, CAT2])

  function handleHeartClick() {
    console.log("Clicked Heart.");

    // add cat to the list
    setFavorites([...favorites, CAT3])
  }
}