IT/ReactJS

[ReactJS] React 이론 공부 기초 - 10

개발자희망생고롸파덕 2023. 12. 13. 10:00

React styling

  • React + styling 도구
    • CSS module
      • css, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없음
      • 스타일 충돌을 방지하고 코드를 격려하여 체계적으로 CSS 설계가 가능함
      • 스타일링을 직접 하나하나 해야함
    • CSS in JS 
      • 따로 CSS 파일을 만들 것 없이 JSX 파일 안에서 스타일링까지 해결 가능함
      • JS 값들을 props로 넘겨줘서 해당 JS 값에 의도된 styling을 바로 적용할 수 있음
      • class 이름에 random string이 생성되기 때문에 선택자 이름이 겹칠 우려가 없음
      • ex)styled components
    • UI framework
      • 이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋음
      • styling의 학습 및 훈련이 필요한 초심자들에게는 비추천함
      • 해당 framework의 디자인 철학을 벗어나기 쉽지 않음
      • 컴포넌트들을 커스터마이징 하기 어려움
      • ex) Ant Design
    • CSS framework
      • 거대한 CSS 파일 하나를 가져 오는 것
      • 개발자가 따로 CSS 파일을 작성하지 않아도 HTML 클래스만 적어주면 정해진 규칙대로 스타일링이 적용 됨
      • CSS에 대한 이해력이 있어도 해당 framework를 사용하기 위한 학습을 또다시 해야함
      • 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천함
      • ex) w3.css, Tailwind CSS

JavaScript template literal

  • Template literals?
    • 내장된 표현식을 허용하는 리터럴
## template literal 
`string text ${expression} string test`
  • 문자열 안에서 JS 표현식을 사용할 수 있게 하는 문법

ReAct  특강

  • frontend 생태계의 이해
    • 생각보다 역사가 길지 않음
    • 예전에는 단순히 정보전달이었다면, 페이스북이 나타나면서 엄청나게 많은 사용자와의 상호작용이 생겨났음
    • Jquery(DOM 조작) : 처음으로 공식문서가 만들어진 라이브러리 > React, Vue (선언적 랜더링) > svelte, solid 컴파일러
    • 선언적 랜더링이란?
      • 무언가를 명시해주면 react나 vue가 알아서 dom을 변환해주는 것
      • 즉, 내가 선언을 하며 리액트에서 알아서 UI 업데이트를 위임받아 처리해줌
      • 핵심 : 가상 돔
  • useEffect 
    • side Effect : 컴포넌트의 렌더링 과정과 직접적으로 연관되지 않은 작업들
    • 상태구독, API 요청, dom 조작..
  • 리액트의 재조정(reconciliation)
    • 랜더링 != DOM 업데이트
    • 어떠한 가시적인 변경도 일어나지 않고 컴포넌트가 랜더링 될 수 있다는 것
    • 상위 컴포넌트가 렌더링  될 때 모든 하위 컴포넌트를 순환하며 렌더링
    • 렌더링에는 side effect 가 없어야 함
    • Render 단계
      • 컴포넌트 랜더링하고 변경사항을 계산함
      • dom이랑 아예 관련이 없는 작업임
    • commit 단계
      • 계산된 변경 사항을 dom에 적용
    • 비제어 컴포넌트 대표  라이브러리 
  • 제어 컴포넌트와 비제어 컴포넌트 차이가 있다면, 상태를 동기화 시키기 쉽냐 어렵나가 있음
  • 제어 컴포넌트는 우리가 useState() 로 다루기때문에 상태를 항상 동기화 할수가 있지만, 비제어는 그 동기화 코드를 따로 짜주던가 하는 비용이 더 들어감
  • context API는 원래 상태관리 라이브러리가 아님. 그래서 쓸때 주의를 해야할 점이 많다
    • Context API = 컴포넌트끼리 상태를 쉽게 공유하기 위해 사용하는 기능
  • 상태관리 라이브러리 = 리액트 애플리케이션 상태를 전역적으로 관리
  • reactive 반응성은 상태의 변화에 따라 업데이트 되는 패러다임으로 이해하면 편함
    • 반응성은 데이터가 업데이트 되면 구독하는 부분도 자동으로 갱신되는 형태를 의미함

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript

 
저작자표시 비영리 변경금지