타임어택 과제 보완

■  많이 놓쳤던 개념

 

 ⚬  화살표 함수

 - 사용법 숙지해서 익숙해질 것

// 화살표함수 뒤 중괄호 사용 시 return 까먹지말것!
todos.map((todo) => {return <div>...</div>})

// 바로 리턴해도 좋은 경우, 중괄호 없이 바로 리턴값 써줄것! 이때 리턴문은 한줄이어야 함!
todos.map(todo => <div>...</div>)

 

 ⚬ 이벤트핸들러 함수

// 이벤트 핸들러 함수는 매개변수로 이벤트 객체를 받는다.
onClick={handleCountDown} === onClick={(event) => handleCountDown(event)}

// 이벤트에 함수를 바로 넘기면 인자를 넘길 수 없다.
onClick={handleCountDown};

// 인자를 넘기려면 함수명(인자)로 써주고 이벤트가 들어갈 부분에는 받을 필요가 없다.
onClick={() => handleCountDown(인자)}

// X 이렇게 써주면 handleCountDown 함수에 number라는 이름의 이벤트 객체를 넘기는 것임(인자를 넘기는게 X)
// 이벤트 객체 이름은 아무거나 상관없음
<button onClick={(number) => handleCountDown(number)}>

 

---

■  타임어택 제출과제 보완(올림픽 메달 트래커)

 

 ⚬ useState 에서 초기값이 길어지면 변수화해서 분리하기

// 수정 전
const [formValues, setFormValues] = useState({
    name: "",
    gold: 0,
    silver: 0,
    bronze: 0,
  });
  
// 수정 후
// initFormValue로 변수화
 const initFormValue = {
    name: "",
    gold: 0,
    silver: 0,
    bronze: 0,
  };
 
 const [formValues, setFormValues] = useState(initFormValue);

 

 ⚬ 중복으로 사용되지 않는 useState는 사용되는 컴포넌트 안에서 사용하기

const [countries, setCountries] = useState([]);
const [formValues, setFormValues] = useState(initFormValue);

 <InputForm
   countries={countries}
   setCountries={setCountries}
   formValues={formValues} // formValues, setFormValues 는 InputForm에서만 사용되므로
   setFormValues={setFormValues} // 이 useState는 InputForm 안으로 넣어주는게 낫다.
  />
 <ListForm countries={countries} setCountries={setCountries} />

 

 ⚬ 업데이트 기능에서 나라를 비교할 때 name 말고 id 값으로 비교하기

   -  어떠한 배열 등에서 특정 아이템을 선택하기 위한 가장 좋은 방법은 id를 이용하는 것!

// input 에 입력한 값으로 비교할 때는 나라이름으로 비교해주면 되지만,
const targetCountry = countries.find((country) => country.name === name);
    if (!targetCountry) {
      alert("해당 국가가 없습니다!");
      init();
      return;
    }
    const updateCountry = countries.map((country) => {
    // 찾은 targetCounry 객체와 비교할 때는 고유한 값인 id 값으로 비교해주자!
      if (country.id === targetCountry.id) {
        return {
          ...country,
          gold: gold,
          silver: silver,
          bronze: bronze,
        };
      } else {
        return country;
      }
    });

 

---

 

😀느낀점

오늘 실시간 강의 시작전 튜터님께서 내가 제출한 과제로 오늘 코드리뷰를 해도 되는지 물어보셔서 조금 당황했지만 피드백을 받을 수 있는 좋은 기회라는 생각이 들어 좋다고 말씀드렸다. 리뷰에서는 내가 캐치하지 못했던 디테일한 부분들을 어떻게 보완하면 좋은지 설명까지 들을 수 있어서 좋았고 메모장에 수정해야할 부분들을 적어놓고 강의가 끝난 뒤 혼자 수정해보고 복습했다.

내가 작성한 코드를 다른사람들도 같이 본다는게 부끄러웠는데 막상 한번 하고나니 그렇게 걱정할 게 아니였고 오히려 이런 일들은 나한테 훨씬 도움되는일이라는 것을 깨닫게 되었다. 앞으로 만약 비슷한 기회가 또 주어진다면 자원하고싶다는 생각이 들었다.

회사에 들어가서 일해보기(1년 이상) 전까지는 적성에 맞는지 판단할 수 없다.
우리는 현재 지식을 습득하는 과정이므로 모든 것을 완전히 자기 것으로 만드는 것은 매우 어렵다.
우리는 캠프를 통해서 JS, 리액트에서 뭐가있는지 알고 그것들을 활용 해 보는 경험을 해보는 것이 중요하다.

 

오늘 강의 시작 전에 튜터님이 해주신 말씀이다.

평소 지치고 현타가 올 때 마다 개발이 내 적성에 맞은가? 에 대한 의심을 하곤 했는데 이제 고작 한달이 지난 상태에서 조금 힘들다고 적성에 맞나 생각했던 나를 되돌아보게 되었다. 잘하고싶은 욕심은 큰데 그 욕심만큼 따라가질 못하니 자주 그런 생각이 들었던 것 같다.

개발 뿐만 아니라 어떤 분야던지 처음 해보면 똑같은 상황일 것이라고 생각한다. 오늘 저 말씀을 듣고 앞으로 좀 더 열심히 할 수 있을 동기부여가 된 것 같다. 조급해하지말고 차근차근 꾸준히 쌓아가려는 마음가짐을 가지자.