TIL 32일차

• 14:30 | Group Project - BR-Sariwon City list SelectBox with Server request

코드

Group Project | BR-Sariwon 5일 차

오늘 한 일

• select box 백엔드 연결

프로젝트 tips

• Mock data

• setState는 비동기 함수다

  • setState메소드가 실행된 직후에 변경된 상태값이 적용되는게 아니고 답변을 기다려야하는 하나의 요청이라고 생각하면 된다.
    setstate 호출 직후에 state에 접근하면 변경 이전 값이 출력된다.

• setState 직후 값 확인 방법

  • setState 함수의 두번째 인자로 콜백 함수를 넘겨 준다. 두번째 인자로 넘겨주는 함수는 해당 비동기처리가 끝나면 실행되는 콜백 함수다.

• setState의 CB는 필요하지 않을 수도 있다?

  • 위의 코드같은 경우 이밴트객체가 변경되는 값을 가장 먼저 알기 때문에 이벤트객체에 담긴 값을 바로 찍어주는 것이 더 좋다.
  • 콜백함수가 필요하지 않은 경우가 많은 이유
  • 입력한 값을 이미 알고잇는건데 굳이state로 확인하지 않아도 된다.
  • 대표적인 예가 e.target.value
  • 그래서 콜백이 필요하지 않은 경우가 훨씬 많다.

• Fragment

JSX의 가장 중요한 규칙이 하나의 부모로 요소들을 감싸는 것이다. 스타일적으로 클래스를 넣어서 뭔가 스타일링을 해야될 때는 마음껏 div를 써서 감싸도 되지만 react를 하다보면 의미없이 div를 감싸는 경우가 생기는데, 그때는 react의 Fragment를 사용하면 된다.

앞으로 자식이 다형제로 되어있고 크게 감싸는애가 필요없을 때 앞뒤로 요런 식으로 사용하면 된다.

• Children

  • props 부모로 부터 자식 컴포넌트로 전달되는 데이터
    컴포넌트의 특징 하나의 컴포넌트가 다른 컴포넌트를 포함할 수 있다.
    부모 컴포넌트에서 자식 컴포넡트가 어떻게 생기고(UI) 어떻게 동작하며 사용자와 상호작용하는지 props를 통해 결정한다.

레이아웃이나 틀이 정해져있고 그안에 나타나는내용들을 조금씩 다르게 하고 싶을때 리액트 children을 사용하면 코드가 깔끔해지고 효율적으로 컴포넌트를 사용할 수 있다.

• children 사용시 장점

  • 레이아웃을 구성하는데 효과적이다.
  • 컴포넌트 재사용성이 증가한다.
  • 틀이 정해져있고 그안에 다른내용을 보여주고 싶을 때 훨씬 효율적으로 사용할 수 있다.
  • children 값으로 컴포넌트 뿐만 아니라 plain text, multiple elements 등 어떠한 것이든 전달할 수 있습니다.

결과가 비슷한듯 다른 부분에 children을 쓰자