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

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에 적용
  • 비제어 컴포넌트 대표  라이브러리 
    • https://www.react-hook-form.com/
• 제어 컴포넌트와 비제어 컴포넌트 차이가 있다면, 상태를 동기화 시키기 쉽냐 어렵나가 있음
• 제어 컴포넌트는 우리가 useState() 로 다루기때문에 상태를 항상 동기화 할수가 있지만, 비제어는 그 동기화 코드를 따로 짜주던가 하는 비용이 더 들어감
• context API는 원래 상태관리 라이브러리가 아님. 그래서 쓸때 주의를 해야할 점이 많다
  • Context API = 컴포넌트끼리 상태를 쉽게 공유하기 위해 사용하는 기능
• 상태관리 라이브러리 = 리액트 애플리케이션 상태를 전역적으로 관리
• reactive 반응성은 상태의 변화에 따라 업데이트 되는 패러다임으로 이해하면 편함
  • 반응성은 데이터가 업데이트 되면 구독하는 부분도 자동으로 갱신되는 형태를 의미함

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