이번 시간에는 먼저
여기에 수정 버튼을 만들텐데
플레이어 이름과 기호 옆에 만들겠습니다
그래서 이 span를 모두
다른 범위로 감싸겠습니다
이 className은 player로 하겠습니다
플레이어 2 부분에도 동일하게 하겠습니다
그리고 여기서 닫아주겠습니다
이는 스타일링 때문인데
방금 작성한 이 span 바로 옆에
수정(Edit)이라고 하는 버튼을 만들어야 하기 때문입니다
플레이어 2에게도 동일합니다
이제 여기에 버튼을 만들었지만
당연히 지금은 작동하지 않습니다
여기에 로직을 추가하기 전에
이미 눈치채셨을 수도 있지만
이 앱 컴포넌트와 플레이어의 마크업을 보시면
동일한 마크업 내용을 두 번
반복하고 있습니다
그리고 이런 경우에는
컴포넌트를 새로 하나 만드는 것이 좋습니다
이런 식으로 마크업이 반복되는 것은
구조에 어떤 변화를 줄 일이 있을 때 번거로워지기 때문입니다
예를 들어 여기의 클래스 이름이
player가 아니라 player-info였다면
이 수정작업을 두 번 반복해야 합니다
이것은 번거로울뿐더러 오류에 취약합니다
그래서 마크업을 이렇게 반복하기보다
새로운 컴포넌트를 만드는 것이 좋습니다
여기에 새로 만들 것은
소스 폴더(src) 하위의 컴포넌트 폴더(components)입니다
이 컴포넌트 폴더 안에는
Player.jsx을 만들겠습니다
이름은 Player-Info여도 되지만
저는 그냥 player로 하겠습니다
이 파일에서
내보내고 싶은 컴포넌트 함수는
동일하게 Player여야 합니다
물론 이름은 임의로 정하면 됩니다만
제 기준에는 player라는 이름이
이 컴포넌트의 목적을 잘 설명하는 것 같습니다
이 안에는 마크업을 반환할 것이고
또 이전에 배우신 대로 렌더링이 가능한 것들도 반환할 것입니다
이 플레이어 컴포넌트 안에서 반환되어야 하는
마크업의 내용은
물론 이 부분입니다
이 파일 안에서 반복되는 부분입니다
이 부분을 App.jsx에서 잘라내서
Player 컴포넌트 안에 붙여넣겠습니다
이제 할 일은 이 컴포넌트에
더 기능을 추가해
매번 '플레이어 1' 또는 'X'를 작성하지 않도록 하는 것입니다
이미 배우신 대로 여기에 속성(props)을 넣겠습니다
여기에 속성으로 name(이름)과
symbol(기호)를 받겠습니다
결국엔 이 두 가지 데이터가
Player를 구성하기 때문입니다
이제 준비가 되었으니
플레이어 이름인 name과
기호인 symbol을 내보낼 수 있습니다
이제 다시 앱 컴포넌트로 넘어와서
이 두 번째 마크업 부분을 삭제하겠습니다
대신 플레이어 컴포넌트를 불러오도록
./components로 경로를 작성하고
파일명인 Player.jsx를 쓰겠습니다
그리고 이제 ol에
플레이어 컴포넌트를 내보낼 수 있습니다
스스로 닫히는 컴포넌트로 작성하겠습니다
그 이유는 현재 시점에서
컴포넌트의 시작과 종료 태그 사이에
데이터를 전달할 것이 없고
특수한 자식 속성 또한 플레이어 컴포넌트에서
사용하지 않기 때문입니다
그래서 일단은 여기에
스스로 닫히는 컴포넌트를 사용하고
이름 속성을 가져와서
일단은 '플레이어 1'로 지정해 두겠습니다
기호 속성은 X로 가져오겠습니다
이제 이 내용을
기호 O, 플레이어 2로 반복하겠습니다
이제 확인해 보면 이전과 동일하고
아직 정적입니다
버튼도 아직 작동하지 않습니다
하지만 이번 시간에 발전시킨 코드로
다음 시간에는 드디어
이 버튼이 작동하도록 해 보겠습니다