두서없이 작성된 내용이며 그날그날 배운 내용을 노트에 정리한 글입니다. 😀
MVC (Model-View-Controller) 아키텍처
- Model : 어플리케이션에서 사용하는 데이터를 관리하는 영역
- View : 사용자에게 보이는 부분
- Controller : 프로그램이 사용자에게서 어떤 작업을 받아서 Model 데이터를 조회•수정 -> 병경된 사항들을 View에 반영
react는 오직 View에만 신경쓰는 라이브러리
렌더링
- 사용자 화면에 View를 보여주는 것
초기 렌더링
render함수, 이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할- View가 어떻게 생겼는지에 대한 객체를 반환
- 컴포넌트 안에 또 다른 컴포넌트들이 들어갈 수 있음
-> 이때render함수를 실행하면 내부에 있는 컴포넌트들도 재귀적으로 렌더링 함
조화 과정(reconciliation)
- View를 업데이트하는 과정
react는 virtual DOM 방식을 사용하여 DOM 업데이트를 추상화 함
- DOM 처리 횟수를 최소화하고 효율적으로 진행
- 실제 DOM의 가벼운 사본 느낌(?)
- 업데이트 처리의 간결성
- UI를 업데이트하는 과정에서 생기는 복작함을 모두 해소, 더욱 쉽게 업데이트에 접근할 수 있음
nvm
- node.js를 여러 버전으로 설치하여 관리해 줌
$ nvm install --lts
vscode 확장 프로그램 (extension)
- ESLint : 자바스크립트 문법 및 코드 스타일을 검사해 주는 도구
- Reactjs Code Snippets : 이름 그대로 리액트 컴포넌트를 쉽게 작성할 수 있는 단축어 도구
cra 프로젝트 생성
- 간편하게 프로젝트 작업 환경을 구축해 주는 도구
JSX 문법
- 감싸인 요소
-> 효과적으로 컴포넌트의 변화를 감지하기 위해서 트리 구조로 만듦, Fragment 사용 - 자바스크립트 표현
->{}로 자바스크립트 값을 렌더링 - 조건부 연산자
1. 삼항 연산자 -> if문을 사용할 수 없음, 사용하려면 JSX 밖에서 사용
2. AND(&&) 연산자 undefined를 렌더링하지 않기
->undefined만 반환하여 렌더링하면 안된다.
-> 반면 JSX 내부에선 렌더링하는 것은 괜찮음
일반 function 과 화살표 함수의 차이
- 가리키는
this의 값이 다르다. - 일반 함수는 자신이 종속된 객체를
this로 가리킴 - 화살표 함수는 자신이 종속된 인스턴스를 가리킴
props
- 컴포넌트 속성을 설정할 때 사용하는 요소
- props 값은 해당 컴포넌트를 불러와서 사용하는 부모 컴포넌트에서 사용 가능
- props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있음
defaultProps, propTypes
- defaultProps : 이름 그대로 props를 지정하지 않았을 때 지정되는 기본 props
- propTypes : 필수 props를 지정하거나 props의 타입을 지정할 때 사용
- 둘 다 협업할 때 유용하다. 해당 컴포넌트에 대한 props가 필요한지 쉽게 알 수 있어 개발 능률이 올라 감
비구조화 할당
- 배열, 객체에서 쉽게 내부 값을 추출할 수 있다.
state
- 컴포넌트 내부에서 바뀔 수 있는 값을 의미
useState
- 인자에는 초기 값을 넣어준다. (어떤 타입이든 상관 없음)
- 첫 번째 원소는 현재 상태
- 두 번째 원소는 상태를 바꿔주는 세터(setter) 함수
state 사용 시 주의 사항
- state 값을 바꿔야 할 때는 전달받은 setter 함수를 사용해야 함
- 사본을 만들어서 업데이트, 불변성 유지
(ง •̀_•́)ง