프론트 엔드 5주 2일차 매개변수와 recoil

1. 매개변수

우리가 여태까지 사용해 왔던 useState의 setState(prev => prev)나 부모 컴포넌트가 자식 컴포넌트에게 전달하기 위한 props나 map에 사용되는 el, index들도 매개변수들로 이를 임의로 변경해 주어도 잘 실행 되는 것을 알 수 있습니다.

 

예시 코드

위의 함수형 컴포넌트는 태그 형태에서 함수 형태로 바꿔서 매개변수로 props 값을 담고 있는 객체를 받게 되면 태그 형태로 했을 때와 똑같은 결과를 리턴하게 됩니다.

 

props 또한 이름을 바꾸는 것이 위와 같이 가능하다.

 

함수와 함수형 컴포넌트의 차이는 컴포넌트의 return 값으로 JSX를 반환합니다.

 

 

Rest-api의 문제점과 endpoint

Rest-api의 문제점

1. 오버페칭

rest-api는 한 번 데이터를 받아올 때 데이터 안의 모든 값을 받아와야한다는 문제점이 생기고 이를 오버페칭이라고 부릅니다.

 

2. 언더페칭

rest-api는 한 번 데이터를 부를 때 오직 한 개의 데이터만을 가지고 올 수 있으며 이를 언더 페칭이라고 합니다.

 

endpoint

endpoint는 API가 서버에서 리소스에 접근할 수 있게 하는 URL을 말한다. rest-api는 post, get, put, delete, update 5개의 endpoint가 기본적으로 존재한다.

 

Graphql

graphql은 위의 문제점 들을 해결하기 위해서 나온 것으로 결국 rest-API를 이용해서 만들어낸 방식( post가 데이터를 보낼 수 있다는 점에서 착안해서)으로 이 이유로 포스트맨으로 graphql을 사용 가능하다. 

 

graphql은 위에서도 말했듯 post방식의 body에 내가 실행시키고 싶은 함수의 이름을 적어서 endpoint를 요청하게 된다 이로 인해서 원하는 수 만큼의 데이터와 데이터 안의 원하는 값만을 호출할 수 있게 됩니다.

 

글로벌 스테이트

여러 컴포넌트에서 중복해서 사용되는 state를 말하는 것으로 글로벌 스테이트를 이용하면 props를 이용해서 값을 전달해 줄 필요가 사라지게 된다. 이러한 글로벌 스테이트를 사용할 수 있게 해주는 툴로 context-Api, Redux, Recoil 등이 있습니다. 

 

fetchPolicy

appollo-client의 고급 기능 중 하나로 fetch해오는 규칙을 정하는 것으로 글로벌 스테이츠를 먼저 확인할 것인지 백엔드 요청을 할 것인지를 정하게 된다.

 

fetchPolicy 예시

예시 코드

위의 코드 처럼 network-only로 정책을 정하면 global state에 있는지 확인하지 않고 바로 백엔드로 요청을 보내게 된다.

(default값은 캐시 퍼스트이다.) 

 

Recoil

글로벌 스테이츠를 사용할 수 있게 해주는 툴 중 하나이다.

 

사용 예시

위와 같이 isEditState를 설정했고 이를 아래와 같이 불러올 수 있습니다.

 

 

 

알고리즘

 

코딩 결과