1차 프로젝트 | 페이지 구현 중 배운 점

🔥 페이지 구현하면서 배운 것

1. transition 속성으로 애니메이션 적인 효과 구현 가능
2. map함수를 까먹었다가 오늘 다시 적용해보게 됨.
   [여러가지 값].map((각각의값,index)⇒{
   return(
   반복하고 싶은 레이아웃
   )})
   ❗️주의할점❗️
   인덱스 값 생략가능, key값 필수로 넣어줘야 하는데 가장 최상위 태그에 적어줘야 함.
3. fetch 함수로 get 방식으로 값을 받아올때는 주소만 적어도 됨!( then 은 상황에 맞게 써줘야함)

4.map함수를 이용하여 셀렉트 박스 구현했다! 😆

	const yearData = () => {
    const year = [];
    for (let i = 2009; i > 1930; i--) {
      year.push(i);
    }
    return year;
  };

<select name="year" onChange={handleInput}>
                  <option>YYYY</option>
                  {yearDataArr.map(year => (
                    <option key={year} value={year}>
                      {year}
                    </option>
                  ))}
</select>

못할 줄 알았는데 의외로 엄청 쉬운거였다.. 그냥 공부가 하기 싫었나보다.. 충분히 할 수 있었는데 왜 우물쭈물하다가 이제와서 하고있지?????????????? 진짜 절대로 공부할때는 집에서 최대한 안해야지.. 진짜로^^..

1. e.target.value에서 값을 계속 담으려고 할 때

const [inputs, setInputs] = useState({
    allergy: [],
// 추가를 할거면 배열(list)에 값 하나하나 다 담아줘야 함
  });
const {allergy} = inputs;
const handleAllergy = e => {
    setInputs(prev => ({
      allergy: [...prev.allergy, e.target.value],
// 이렇게 적용시키면 됨.
    }));
  };

1. 백엔드에 생년월일 값을 줄 때

   셀렉트박스가 각각 년, 월, 일 이렇게 나눠져 있기 때문에 한꺼번에 값을 줄 수가 없어서

   input값은 각각 onchange로 담고 fetch함수로 넘겨줄때 body에서

   birth: ₩${year}-${month}-${day}₩

   백엔드가 birth로 하이픈으로 연결해서 스트링으로 달라고 했기 때문에 스트링에 변수값을 넣기 위해 백틱과 ${}를 이용해서 저렇게 해서 보내면 됨.

   1. 라이브코드리뷰때 배운 것 중 5번째와 연결됨.

   const [allergyData, setAllergyData] = useState([]);
   
     useEffect(() => {
       fetch('http://208.82.62.99:8000/user/allergy')
         .then(res => res.json())
         .then(res => {
           setAllergyData(res.allergies_list); // 1번
           // setAllergyData(prev => [res.allergies_list, ...prev]); // 2번
         });
     }, []);

   1번 함수를 쓴 이유는 이전의 상태값을 고려할 필요가 없기 때문이다.

   1번은 백엔드에서 받아온 데이터를 state로 저장하는 건데, 이전의 상태값이 영향을 주지 않기도 하고 백엔드에서 받은 데이터를 따로 수정하거나 삭제하는 과정을 거치지 않고 바로 그냥 값을 대체해버리는 것이기 때문에 깊이 고민할 것 없이 1번을 쓰는게 맞음