Study

[202010927choiminjune]

✨ 구현 기능 명세

• 구현예시 영상 중 첫번째 영상만 구현.

📌 내가 새로 알게 된 부분

• ~ 부분 이렇게 구현했어요, 피드백 부탁해요!
• props로 전달하여 색깔 바꾸기
  background: ${(props) => props.selected ? 'white' : 'blue'}; color: ${(props) => props.selected ? 'gray' : 'black'};

💎 구현과정에서의 고민과정(어려웠던 부분) 공유!

• 각각의 단계(음식 나라, 음식 유형, 국물여부)를 상태값으로 만들고, 그리고 각각 단계에 따른 선택을 또다시 상태값으로 만드는 것이 많이 어려웠습니다. (여기서 2일에서 3일 걸림)

• {!foodType && (!recommend || recommend === 'taste') &&( <Button selected={recommend === 'taste'} onClick={() => handleRecommendation('taste')}> 취향대로 추천 </Button> ) }
  이와같은 코드를 작성했는데 !foodType를 통해 음식유형을 확인하고 추천유형을 선택하지 않았거나 취향대로 추천을 선택했을 경우 버튼이 표시되도록 합니다.

• const handleStartButtonClick = () => { setFoodType(true); setRecommend(null); };
  예시 코드
  각 단계에 따라 이전 상태값을 False나 null처리 합니다.

• 각각의 이미지를 상수데이터로 만들긴 하였지만 각 단계에 따라 데이터 안에 있는 값을 활용하여 일치하는 여부, 이런 로직을
  넣어야 할 것 같습니다. ?! ->하지만 로직관련해서 떠오르진 않습니다.
  {koreanFoods.map(food => ( <div key={food.id}>{food.name}</div> ))}

• 그리고 2번째 단계부터는 이전상태값(prev)를 이용해서 다시 또 데이터의 값을 활용해야 할 것 같습니다.
  여기서 이전 상태값을 활용해야 할 것 같다는 생각이 드는 이유는 지금 한식 중식 일식 버튼을 클릭하고 밥, 면, 고기/해물이라는 선택지가 또나오기 때문에 계속 걸러져야 겠다는 생각이 들었습니다.

• 그리고 각각의 단계에 따른 컴포넌트를 작성하고 App.jsx와 연결을 해야 하고 기존 App.jsx에 있는 코드를 다시 또
  세부적으로 쪼개야 할 것 같습니다.

🥺 소요 시간

• 6일

🌈 구현 결과물

Vite.React.-.Chrome.2024-06-07.21-31-51.mov

[ljh0608]

아직 구현되지 않은 부분이 많아 아쉬웠어요.. useState와 useEffect부터 차근차근 기초를 다지면 더 좋을 것 같습니다! 강의를 듣거나 책으로요!!
고생 많았습니다 민준!

[ljh0608]

Body라는 컴포넌트명이 이 컴포넌트의 역할을 정확히 명시해주지 않는 것 같아요 ! 가독성있는 코드를 고려해보면 좋겠습니다!
예를 들면 MenuSelectWrapper ~

[ljh0608]

nonSoup로 값을 정하면 더 좋을 것 같네요 soup가 없다 가 아니라 soup가 아니다 이니까요!
그리고 가독성을 위한 카멜케이스 사용도 추천합니다

[ljh0608]

이부분을 선택해도 그대로 렌더링 되어있네요! 이건 step이라는 상태를 관리하면서
step=0일 땐 이부분을 렌더링하고 step=1일 땐 아래 국물 컴포넌트를 렌더링 하는 구조로 가면 좋을 것 같아요!
그럴러면 지금 이부분 음식 종류 컴포넌트와 국물컴포넌트(국물을 선택하는 컴포넌트) 는 컴포넌트로 따로 분리해주는 것이 코드 가독성이 좋겠죠 지금 이 App내에 너무 많은 역할을 하는 코드가 있는 것 같습니다

[ljh0608]

지금 음식이 도출되는 로직은 안나와있는게 맞는거겠죠?? 해당 로직은 useEffect로 관리하지 않아도 될 것 같아요! useEffect는 사이드이펙트를 잡기 위해 사용하는거니까요! react의 state는 useEffect로 억지로 잡지 않아도 변경되면 자동으로 리렌더링됩니다!