TIL - 21.07.11 👨‍💻

React Router DOM 추가

---

Route 컴포넌트

라우트 컴포넌트를 이용할때 <Route path='/:key'> 와 같이 콜론을 이용할 수 있다.
콜론을 이용하면 key 자리에 들어간 값을 '/' 페이지에서 받아올 수 있다.
자료형은 객체형으로 받아오며 React Route Dom의 useParams 컴포넌트를 이용해서 객체의 프로퍼티로 사용할 수 있게된다.

let Comp = () => {
  let Hello = () => {
    return ( <h2>`${useParams().anykey}`</h2> 
    )
  }
  return (
    <div>
      <BrowserRoute>
        <h1>route example</h1>
        <Switch>
          <Route path='/:anykey'>
            <Hello />
          </Route>
        </Switch>
      </BrowserRoute>
    </div>
  )
}

// add.ress/sunghoon 으로 접속하면
// route example 의 대제목 밑에 sunghoon이 소제목으로 있는 페이지가 출력된다.
  

---

REST API

url과 메소드로 CRUD 요청하는 것.

Create: POST
Read: GET
Update: PUT
Delete: DELETE

---

useEffect()

어떤 상태 값이 바뀌었을때 동작하는 함수 값을 만들 수 있다.

useEffect()는 두가지 매개변수를 가진다.
첫번째 매개변수는 정보 업데이트가 이루어졌을때 작동할 함수이고,
두번째 매개변수는 의존성 배열자리로 의존성 배열은 첫번째 매개변수가 어떤 정보(변수)가 업데이트 되었을때 작동할 것인지 정하는 배열이다.

1. 두번째 매개변수 자리가 없다면 페이지 내에서 어떤 값이 바뀌던지 useEffect의 함수가 실행된다.
2. 두번째 매개변수인 매개 변수에 변수를 요소로 넣는다면 배열의 요소인 변수가 바뀔때만 함수가 실행된다.
3. 만약 빈 배열일 경우 최초 사이트 로딩될때 한번만 함수가 실행된다.

---

fetch와 .then

fetch는 API를 불러오는 함수이다.
fetch('https://add.ress/key')와 같은 식으로 사용한다.
그리고 .then은 fetch 함수가 API 데이터를 전부 불러왔을때 작동하는 함수이다.

이게 필요한 이유를 설명하자면 자바스크립트 함수는 동기 함수와 비동기 함수로 나뉜다.
동기 함수는 코드가 위에서 아래로 실행될때 실행중인 함수가 종료되고나서 다음 함수가 실행되는 함수이고, 비동기 함수는 실행하고 바로 다음 코드로 넘어가 다음 함수를 실행하는 함수이다.

그리고 fetch 함수는 대표적인 비동기 함수이다.
그래서 API 호출이 끝나지 않더라도 코드가 계속 진행되고, 다음 함수가 실행될 수 있다.

여기서 데이터를 할당한다던가 하는 함수를 써야할때, API 호출이 완료된 다음에 실행되어야 데이터 전부를 할당할 수 있으니 .then 함수를 이용해 fetch 함수의 실행이 완료된 다음 .then 함수가 실행되게 하는 것 이다.

GOOD 😉

유튜브 실습을 통해 리액트랑 친해지려고 노력 중이다.

BAD 😥

날이 너무 더워서 오후에 아무것도 못했다.
방에 에어컨이 없어

TO DO 🔥

• React
  • props와 state 개념 복습
  • 노마드코더 리액트 클론코딩
  • 코딩앙마 유튜브 마저 보기

Retrospect 🧐

여름은 미친 계절이 아닌가 싶다.

아무래도 최근 3년 1년 365일 에어컨 빵빵하고 바닥 뜨끈한 환경에서 살다가 혹독한 고향집으로 돌아오니 날씨가 너무 적응이 안된다.

작년 10월 쯤에 돌아왔는데, 겨울이라 그땐 살만했다.
근데 여름이 되니까 안그래도 에어컨 방에 없는데 열 뿜는게 ( 노트북, 모니터, 독서등, 선풍기, 나) 너무 많아 방이 너무 덥다.

가족들이랑 어떻게 타협을 봐서 방에 에어컨을 달던가 해야 이 미친 계절을 버틸 수 있을 것 같다.

이 미친 계절이 빨리 지나가길..

내일 아침에 노마드코더 리액트 일부 듣고, 알고리즘 두문제 풀고 프롭스 스테이트 개념 다시 복습한 다음 실습할거 다 하고 다시 노마드코더 들어야겠다.

내일은 지켜보자.

Reference 🙇

코딩앙마님 유튜브 - https://www.youtube.com/channel/UCxft4RZ8lrK_BdPNz8NOP7Q
https://developer.mozilla.org/