[React] 리액트 스터디 1일차

1.1 자바스크립트를 통한 리액트가 급부상한 이유

+++1.1.1

데이터를 처리하는 Model과 사용자에게 보여지는 View가 존재함.

기존의 DOM과 새로운 DOM 두 개의 뷰를 비교함. render 함수를 통해 업데이트가 발생한 컴포넌트만 리렌더링 함.

 

+++1.2.1 Virtual DOM

렌더링, 리렌더링 ex) 인스타 릴스같은 지속적으로 데이터가 변화하는 대규모 애플리케이션

 

+++1.2.2

프레임워크와 라이브러리의 차이점? 리액트는 라이브러리이다.

여러 라이브러리와 섞어서 리액트를 사용함. 다른 프레임워크와 혼용하여 사용 가능함.

 

+++2.1

--- bundler 이해 못함, 모듈? 파일 로더? 웹의 동작 과정 알아두기

>> 번들링: 파일 묶기, 압축

 

+++2.2

JSX는 자바스크립트 문법이 아님.

개발자들이 임의로 만든 문법을 플러그인을 통해 사용가능하도록 함.

 

+++2.3

2.3.1 html 문법과 비슷함.

코드가 보기 쉽고 익숙함, 가독성이 좋음.

 

2.3.2 컴포넌트를 html 태그 사용하듯이 편하게 사용함

더욱 높은 활용도.

--- document.getElementById('root') 뜻 뭐임?

>> root라는 html을 하나만 사용하고 나머지는 전부 컴포넌트를 통한 렌더링

 

+++2.4

2.4.1 JSX 문법

<></>로 묶여져 있어야 함. ex) div, Fragment 등등..

 

2.4.2 기본적으로 const 선언, 변하는 값인 경우 let으로 변환

렌더링을 통해 값이 변하는 부분: 코드를 {}로 감쌈

 

2.4.4

--- && 연산자 이해 못함

 

2.4.5

--- || 연산자 이해 못함

 

2.4.6 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태가 아니라 객체 형태로!!!

문자열 표기는 카멜표기법을 따름. 첫문자는 소문자 그 다음 단어는 첫글자만 대문자로.

 

2.4.7 class -> className 사용

버전 바뀌기 전에는 작동 X

버전 바뀌고는 자동으로 바꿔주고 경고

 

2.4.8 태그 닫기

</>: self-closing

 

2.4.9 주석 작성법

1. {/*내용*/}

2. 시작 태그를 여러줄로 작성할 때 '//' 뒤에 내용은 주석 처리됨.

 

3.1