👏🏻 Basic

1. React는 JSX문법을 사용하여 데이터 바인딩(HTML에 데이터를 넣는 것)을 한다.

   • View Code

2. State 끌어 올리기(단방향 데이트 흐름 대응)

   

3. 이벤트 제어(onClick)

   • View Code

4. Component (React 핵심 기능) & Props(Properties)

   • View Code

5. React-Router-Dom & Hooks → 여러 페이지를 만들 때 씀, 페이지의 로딩 없이 component를 불러와 렌더링해준다.

   • View Code

6. CSS/SCSS(SASS) 사용하기

   • View Code

7. 반복문 응용(.map())

   • View Code

8. axios로 json 정보 받아오기

   • View Code

9. public 경로 설정하기

   • View Code

10. 컴포넌트별로 Title 변경하기

    → 각 컴포넌트에서 title 요소를 가져와 text를 변경해 준다.

    • View code

👊🏿 Hooks!

• useState

  변수 대신 '수시로 바뀌는 데이터'를 저장 하기에 용이하다. State(상태)가 변하면, 화면을 다시 그린다.(리렌더링, 함수가 다시 호출되고 html 다시 뿌림) 🪄 본인 State 바뀔 때, 내려오는 props가 바뀔 때, 부모가 리랜더 되면 나도 리랜더 됨.

  • View Code

• useCallback

  Memoization된 콜백을 반환한다. 함수의 재생성과 함수를 재생성하면서 항상 최신의 State를 참조할 수 있도록 도와주는 함수형 업데이트를 함께 사용한다.

• useEffect

  특정한 조건에 의해 렌더링이 될 때마다 함수를 실행할 수 있도록 사용한다.

  • View Code

• useMemo

  Memoization/연산 과정 최적화 이미 계산 해 본 결과를 기억해 두었다가 동일한 계산을 시키면 다시 연산하지 않고, 기억해 두었던 데이터를 반환하는 방법으로, 마치 시험을 볼 때, 이미 풀어본 문제는 다시 풀어보지 않아도 답을 알고 있는 것과 유사함.

  <aside> 💡 함수 자체를 반환할 때는 사용할 수 없다.

  </aside>

  • View Code

🤖 Emmet

VScode에서 HTML Emmet 사용하려면?

• F1 → setting.json에 아래의 내용을 넣어 준다.

  "emmet.includeLanguages": {
        "javascript": "javascriptreact"
   }