📒 오늘 공부한 내용

🔍수업목차

[21-1] 컴포넌트와 props, data, prev,el,graphql-variables의 실체
[21-2] rest-api의 문제점과 endpoint
[21-3] graphql과 rest-api의 관계
[21-4] 글로벌 스테이트

✅ 컴포넌트와 props, data, prev,el,graphql-variables의 실체

---

📂 함수 기본

// 함수의 선언
const func1 = (param)=>{
		console.log(param)
	}


// 함수의 실행
func1(argu)

// 결과
	// param.argu

• argu가 함수로 들어가게 되고 함수의 param은 argu를 받아온다.
• 함수에 들어가는 것은 인자(argu), 뭘로 받을지 기다리는 것은 매개변수(param)다.

// 함수의 선언
const func2 = (param) => {
		console.log(param.count)
	}

// 함수의 실행
func2({count : 123})

// 결과
	// 123

📂 props

• aaa로 넘겨준 인자를 받고있다. 그런데, aaa는 props의 자리였다.
• props는 사실 함수의 파라미터다.

📂 el

함수의 선언

const getProfile = (aaa,bbb)=>(
		console.log(`${aaa}는 ${bbb}입니다.`)
	)

함수의 실행

getPrfile("훈이",2)

// <----실행 결과----->
// 훈이는 2입니다.

• 인자로 넘겨주는게 여러개 일 경우 파라미터도 인자의 갯수만큼 늘어나며, 넘겨준 순서대로 들어오게 된다.

map_1

["철수","영희","훈이"].map((el,index)=>(console.log(`${el}는 ${index}번째 입니다.`)))

// <----실행 결과----->
// (”철수”,0) (”영희”,1) (”훈이”,2)

• 인자를 순서대로 넘겨주는 것인데, map에서 넘겨주는 인자의 순서는 배열의 value값→해당 value의 insdex 값 순서로 들어가게 된다.

map_2

["철수","영희","훈이"].map((index)=>(console.log(`${index}는 무엇일까요?`)))

// <----실행 결과----->
// (”철수”) (”영희”) (”훈이”)

• 이름만 index일 뿐이지, 배열의 각각의 원소인 "철수", "영희", "훈이"를 의미한다.
• map 또한 함수였으며, el과 index는 함수의 파라미터다.

📂 prev

setCount(prev => prev+1)

• prev 역시, 함수의 파라미터다.

setCount((prev)=>{return prev+1})

📂 graphql-variables

const CREATE_BOARD = gql`
mutation createBoard($writer: String){
		createBoard(writer: $writer){
			_id
		}
	}
`

• $가 붙은 것 들은 변해도 괜찮은 변수다.
• $writer가 아닌 $hello가 되어도 괜찮다.

✅ rest-api의 문제점과 endpoint

---

• endpoint : API가 서버에서 리소스에 접근할 수 있도록 가능하게 하는 URL

  

• rest-api 에서는 post, get, put, delete, update 방식만해도 이미 endpoint가 5개가 생성되기 때문에 이외의 endpoint를 추가하게 되면 상당히 많은양의 endpoint가 생기게 된다.

📂 오버페칭

• graphql : api 요청이후 결과값으로 필요한것만 받아오게 된다.
• rest-api : 결과값을 모두 받아오게 된다.
• 필요없는것까지 모두 받아오는 과정을 오버페칭이라고 부른다.

📂 언더페칭

• rest-api : endpoint에 body를 넣어 보내기 때문에 하나의 endpoint에 하나의 body만 들어가게 된다.
• 한번에 여러개의 api를 요청할 수 있는 graphql과는 다르게 rest-api는 한번에 하나의 api만을 요청할 수 있다.
• 내가 필요한건 3개의 api인데 한개씩 여러번 받아오는 것을 언더 페칭이라고 한다.

✅ graphql과 rest-api의 관계

---

• rest-api 의 위와 같은 문제점을 개선하기 위해 나온 것이 바로 graphql다.
• graphql은 rest-api의 post 방식에서 data를 넣을 수 있음을 이용해 만들어낸 방식
• 완전히 새로운 방식이 아닌 rest-api의 post방식의 응용

• graphql : post방식의 body에 내가 실행시킬 함수의 이름을 적어서 endpoint를 요청한다.
• graphql은 endpoint문제와 언더페칭과 오버페칭문제를 모두 해결

✅ 글로벌 스테이트

---

• 사이트를 만들다 보면 하나의 state가 여러 페이지에서 필요한 경우가 있다.
• isLogined 같은 state는 게시글 목록이나 결제 컴포넌트 같이 여러가지 컴포넌트에서 사용된다.
• 매번 props로 내려주기 어렵기에 이럴 때 사용하는것이 글로벌 스테이트다.

• 글로벌 스테이트 : 여러컴포넌트에 사용되는 state
• store에 name이라는 state를 저장해두고 필요한 컴포넌트에서 import 해서 사용하기 때문에 props drilling을 하지 않아도 되고 굉장히 편리하다.
• 전역상태관리(global state) 툴 : context-Api, Redux, Recoil

📂 fetchPolicy

• 2번 컴포넌트에서 useQuery를 해오게 되면 useQuery를 해서 받아온 데이터가 Apollo-Cache에 저장된 후 컴포넌트로 들어오게 된다.
• 이후에 3번 컴포넌트에서 같은 데이터를 요청하게 되면, Apollo-Cache 에 먼저가서 데이터가 있는지 확인하고 없으면 백엔드에 요청을 있으면 백엔드에 요청을 하지 않고 컴포넌트로 바로 보내주게 된다.
• fetchPolicy에는 여러가지 기능
  • cache-first : default → 캐시에 있는지 먼저 확인
  • network-only : → 캐시에 있든 없든 무조건 백엔드에 요청

📂 Recoil

• Recoil 설치

  • npm 사용자 : 터미널에 npm install recoil 을 입력
  • yarn 사용자 : 터미널에 yarn add recoil 을 입력

• Recoil 세팅

  app.tsx

  //app.tsx 파일 
  import {
    RecoilRoot,
    atom,
    selector,
    useRecoilState,
    useRecoilValue,
  } from 'recoil';
  
  function App() {
    return (
      <RecoilRoot>
  		//RecoilRoot로 모든 컴포넌트를 묶어주세요
        <Component />
      </RecoilRoot>
    );
  }

• Recoil 사용

  • Atom에 변화가 있으면,해당 atom을 참조하는 모든 컴포넌트에서 리렌더링이 일어난다.

// Atom
const textState = atom({
  key: 'textState', // state의 이름
  default: '', //초기값
});

// TextInput 컴포넌트 
function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}