2021.06.18(Fri.) <실전으로 보는 리액트>

1. 컴포넌트 정리

• img 같은 경우 컴포넌트를 뽑아서 외부에서 className과 받아올 이미지 정보를 넣어서 렌더링 시킨다.
• img 태그 안에는 alt 가 들어가야 한다. 아니면 에러는 아니지만 경고가 뜬다.

2. props 로 데이터 주고 받기

• 일반적인 형태는 '받을 자료의 이름'={props.props데이터의 이름} 이다.
• 잊지말고 props 를 함수의 인자로 받아줘야 한다. 그게 싫다면 받아올 자료의 이름을 함수 인자안에 {}으로 감싸서
  넣은 후에 사용할때도 그대로 이름으로 쓰면 된다.

3. App.js

• 우리가 직접 볼 '틀' 이 된다.
• BrowserRouter, Route, Switch, Link 를 통해 주소 경로를 정해주고 알맞은 곳에 컴포넌트도 배치해 준다.
• Route 설정시 홈 주소에는 exact path 로 다른 주소와의 혼선을 방지하자.
  • 주소는 뒤에서 부터 읽어 들어간다고 보면 쉽다. 그러니 주로 홈의 주소가 되는 "/" 는 다른 주소들에도
    들어가 있기 때문에 확실히 주소가 "/" 일때만 이동되는 exact path 를 넣어준다고 생각한다.

4. 본문

• 주로 목록이 될 데이터는 가장 상단에서 map 을 이용해 원하는 정보만을 배열로 반환해서 선언해 두는 것이 유리하다.
• 이후 useState 로 변동이 있을 데이터를 저장해 둔다.
• a 태그에는 href 를 넣어야 한다. 하지만 이것도 마찬가지로 에러는 아니다. 리액트에서는 주로 새로고침 되는 것을 막기 위해 href는
  쓰지않고 Link to로 경로를 설정하는데 본문에서 href 를 사용하는건 이상하다.
• id 로 className 을 덮어버릴 수 있다. 원본 데이터가 들고 있던 id 도 마찬가지로 본문 태그 안에서 id를 다시 설정해 주면 된다.

같은문제를 계속 보고 있다.
이제 나머지 부분은 전부 숙달된 것 같지만 아직 이벤트 핸들링이 조금 아쉽다.
원본의 데이터의 상태를 바꿔서 원하는 곳으로 다시 호출하는 것이 무슨 상관인지 잘 모르겠다.
원본 데이터를 수정하는 것이 좋은 일이 아닌것 같은데 조금 더 자료를 찾아 봐야 할 것 같다.
이미 완성된 다른 사람들의 예시를 찾아보고 조금 더 효율적으로 코드를 짜는 법을 배워야 겠다.