리액트의 상태관리란? Redux를 사용해봤다면, 그것에 대한 설명
리액트에서 전역의 상태를 관리하기 위해서 사용하는 방법이다. 컴포넌트간의 상태들을 한군데다가 모아놓고 공유해서 사용하는 방식.
리액트의 상태관리는 Context API, Redux, MobX 등의 상태관리가 있으며, Context API보다 Redux를 사용하는 이유는 대규모 개발에서 유지보수성이나 작업효율을 높이기에는 Redux를 사용하는것이 좋기 때문에 많은 사람들이 Redux를 사용하는 것이다.
그래도 리액트 16.3이후 버전에서는 Context API가 개선되어 사용하기 좋아졌다.
Redux는 사실 다른 곳에서도 많이 쓰이는 기술이었지만, react-redux라는 것이 있어서 react에서 사용하기 좋아졌다.
react-redux 3가지 규칙
1) 단일 스토어야 할것
2) 읽기전용상태여야 한다. 즉 기존의 객체는 건드리지 않고 새로운 객체를 생성해서 사용하여야한다.
3) 리듀서는 순수한 함수여야한다. 즉, 파라미터 외의 값에는 의존하지 않아야한다.
만드는 순서는 액션 타입을 정하고, 액션 생성 함수를 만들고, 이 액션들을 사용하는 리듀서 함수(초기상태 포함)를 만들고, index.js에서 스토어를 만들어 provider로 스토어를 props로 전달해준다.
프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하여, 컨테이너 컴포넌트에서 connect함수를 사용해서
- mapStateToProps(스토어 안의 상태를 컴포넌트의 props로 넘겨주기 위해 설정하는 함수),
- mapDispatchToProps(액션 생성 함수를 컴포넌트의 Props로 넘겨주기 위해 사용하는 함수)
이 2가지를 다음과 같이 사용
connect(mapStateToProps, mapDispatchToProps)(타깃컴포넌트)
자세한 리덕스 내용은 아래를 참고
https://sunnykim91.tistory.com/entry/2020-01-30-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%88%98%EC%97%85-Redux-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8%EC%A4%91
Context-API이란?
리액트에서 전역상태를 관리하기 위한 기능
클래스형과 함수형의 차이
클래스형은 라이프사이클 메소드를 사용하고, 함수형에서는 useEffect등 Hook을 사용한다.
클래스형은 render함수가 반드시 필요,
함수형이 선언하기 더 간편하다.
라이프사이클 메소드
클래스형에 라이프사이클 메소드에는 크게
mount, update, unmount 3가지 과정으로 나뉜다.
자세하게는
constructor -> getDerivedStateFromProps -> render -> componentDidMount ->
getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate
-> componentDidupdate
mount에서 컴포넌트가 만들어질때 componetDidMount에서 비동기처리 같은것을 주로하고, shouldComponentUpdate에서 업데이트 직전에 랜더링시(상태가변경)에 조건으로 재랜더링을 하냐마냐 결정을 할 수 있고, componentDidUpdate 업데이트 직후에 호출되는 메소드이고 unmount에서 컴포넌트가 소멸된 시점에 타이머나 비동기 API를 제거하는 곳이다.
타입스크립트
Typescript는 동적타입언어인 Javascript의 약점을 보완하기 위해서 타입을 지정해주는 것이다.
타입이 필요한 이유는
첫째, 메모리를 절약하기 위해서이다. 메모리에 저장된 것을 읽어들일때, 값을 메모리에 저장할때, 값이저장되어있는 것을 참조할때의 크기들을 알아야 하기 때문이다.
둘째, 에러를 잡기가 쉬워진다. 다른 동료와 협업 할때 코드의 예측도 가능해지고, 코드에디터의 도움을 더 받을 수 있다.
리액트의 경우 (브라우저는 javascript밖에 모르기떄문에) tsx파일을 javascript로 변환하는 트랜스파일링이 필요하다.
이때 변환하는 과정에서 에러를 잡을 수 가있다. 런타임에 오류를 잡는 것보다 훨씬 좋다!
셋째, Babel을 안써도 된다.
Angular와 React의 차이점
우선 Angular는 프레임워크이고, React는 라이브러리이다.
Angular는 양방향 바인딩개념으로 Model과 view가 연결되어있어 데이터 값이 한쪽에서 변화하면 다른쪽에서도 바로 업데이트가 진행된다. 서비스라는 개념은 컴포넌트간의 의존성관리를 용이하게 해준다. Directive를 이용하여 커스텀 HTML태그를 작성할 수 있다.
React는 Virtual DOM을 가지고 있다. 가상 DOM이 있기때문에 상태를 비교하여 부분적으로 랜더링 할 수 있어 속도가 빠르다. 오직 UI컴포넌트를 만들기 위한 라이브러리이다.
Angular는 HTML스크립팅이 templete 기반,
React는 JSX 이용 / Angular는 기본이 Typesciprt
가상돔 (virtual DOM)
Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 한다.
먼저 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거친다.
DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정 역시 20회 다시 이루어 진다. 작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하된다.
Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달한다.
따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 되는 것이다.
라이브러리와 프레임워크에 대해서 설명
라이브러리와 프레임워크의 차이는 자유도의 차이 인것 같다.(또는 라이프사이클을 가지는 차이)
프레임워크는 짜여진 패턴이나 틀 기반에서 내가 코딩을 하는 것이고,(자유도x)
라이브러리는 내가 가져다 사용해서 자유롭게 사용하는 방식이다.(자유도o)
두 명의 프론트엔드 개발자가 git을 관리하는 방식?
git repository를 하나파서 다른 동료가 fork를 해서 사용하는 방식. PM과 팀원의 구조를 가질 수도있고 동시에 Pull request를 가능하게끔 권한을 줄 수 도 있다. 각자의 팀장의 레포가 origin이라하고, 팀원의 포크딴 레포를 rmorigin이라고 한다면 각자의 origin에서 develop브랜치에서 작업을 한뒤 최종 작업이 완료되면 팀장의 origin의 마스터로 push한다.
메소드 체이닝 장점
메소드 체이닝의 장점은 코드가 짧아진다는 장점이 있고, 단점은 에러가 났을때 어느 부분의 메소드에서 오류가 났는지 확인이 어렵다.
메모라이제이션이란?
불필요한 연산이나 계산을 하지 않고 기억을 해놓고 그 기억해놓은 것을 활용하는 방법
캐싱이란 비슷한 개념.
RESTful API 가 무엇인가
REST API는 URI로 접근가능하고 내용이 JSON,XML 등으로 표현된 자원에 대한 행위를 HTTP Method로 정의한다.
RESTful하다라는 것은 REST API의 설계의도를 명확하게 지켜주는 것이다.
슬래시(/)를 통해 계층관계를 표시한다던가 숫자는 id를 나타낸다든가 동사보단 명사를 위주로 쓴다든가 하는 식.
CORS(Cross-Origin Resource Sharing)는 무엇인가, 왜 이러한 방법이 정의 되었으며, CORS와 관련하여서 경험하였던 이슈는 무엇인가
CORS란 도메인 또는 포트가 다른 서버의 자원을 요청하면 발생 하는 문제
경험 없음.
웹 프론트 측에서 request header에 CORS 관련 옵션을 넣어주고, 서버에서는 해당 프론트 요청을 허용하면 됨
Eslint가 무엇인가?
Eslint는 소스코드를 스캔하여 문법적오류나 잠재적 오류까지 찾아내고 오류의 이유를 볼 수 있게 해주는 도구
Prettier가 무엇인가?
prettier는 정해진 규칙대로 코드를 이쁘게 할 수 있는 도구, 들여쓰기나 따옴표 등을 맞춰준다.
Webpack이란?
webpack은 모듈 번들러로 파일 확장자에 맞는 로더에게 위임해서 하나로 묶어준다 최종 배포용 파일을 만들어줌
<script>태그가 여러개 있을 때 순서보장도 중요하기 때문에 이런것도 Webpack에서 해줌.
패키지매니저로 어떤거 사용?
과거 깃허브에서 받은 소스코드를 npm i로 패키지를 설치 했을 때 이전과 버전정보가 다른 환경문제가 생길 수 있었는데 이것을 처리하기 위해서 yarn.lock 파일에서 처리할 수 있었다. 하지만, 현재는 npm의 package-lock.json에서 이 처리를 동일하게 사용할 수 있다.
반응형 웹 vs 적응형 웹
반응형 웹은 하나의 템플릿을 사용해 모든 기기에 대응하는데 반해, 적응형 웹은 선별된 기기 유형에 따라 별도의 독립적인 템플릿이 요구
CSR과 SSR의 차이?
CSR의 과정
- 서버가 브라우저에게 응답을 보냄 -> 브라우저는 JS를 다운 받음 -> 브라우저는 리액트를 실행 -> 페이지가 보여지고 상호작용 함
SSR의 과정
- 서버가 브라우저에게 HTML 응답 랜더링하기 위한 준비가 되었다고 보냄 -> 브라우저가 페이지랜더링, 페이지가 보여지고 브라우저는 JS 다운받음 -> 브라우저 리액트 실행 -> 페이지 상호작용 가능
CSR은 마지막 단계 전까지 화면에 보여지지가 않고 로딩중 / SSR은 미리 페이지가 보여진다.
즉, CSR은 초기로딩속도가 느리긴하지만, 화면전환에 있어서 클라이언트에서 이루어져서 빠른 전환이 가능
SSR은 초기로딩속도가 빨라서 사용자가 느끼기엔 좋지만, 동작은 하지않음. 그리고 화면전환에 있어서 서버에 요청해야하므로 서버에 부담을 줄 수 있음.
어떤게 더 좋다보다기 보다 서비스마다 사용자의 요구마다 다름.
이벤트 위임이란?
이벤트 위임이란 자식 엘리먼트의 이벤트를 부모엘리먼트에서 감지할 수 있으니 이벤트를 하나하나 등록하는 것이 아니라 부모에게 이벤트를 위임 하는 방법
DOM을 건드리는 방식과 아닌 방식들의 차이
직접 DOM을 건드리는 경우 DOM의 구조를 파악하고 있어야하며, 클래스명이나 태그명이 바뀌는 경우 다시 DOM을 변경해야한다.
Angular의 경우 view와 model을 연결시키는 바인딩작업이 있고 변화감지를 통해서 상태를 보고 있다가 업데이트되는식이다.
React의 경우 가상 DOM이 있고, 가상 DOM이 실제 DOM과 비교하여 state가 변화되었는지 감지 한다.
반응형 프로그래밍?
반응형 프로그래밍이란 데이터 스트림이라는 하나의 일관된 형식으로 만들고, 이 데이터 스트림을 구독하여 데이터 스트림의 상태 변화에 반응하는 방식으로 동작하는 애플리케이션을 만드는 것.
예를들어, Tv랑 Tv방송국이 있다고 가정했을때, Tv방송국이 일정한 시간 단위로 영상에 대한 프레임을 계속해서 방출(emit)하고 TV는 방송국을 관찰하고 있다가 새로운 영상을 방출하면 이를 획득하는 방식이다. 여기서 방송국의 역할이 옵저버블, Tv가 옵저버, 영상프레임이 Notification이다.
null vs undefined ?
기본적으로 둘다 값이 없음을 나타낸다.
null은 명시적으로 값이 비어있음을 나타내는데 사용
undefiend는 데이터 타입이자 값을 나타냄. 정의되지 않은 것
undefined는 변수를 선언만 한더라도 할당되지만, null은 변수를 선언한 후에 null로 값을 바꾼다.
vue와 React의 차이?
공통점으로 컴포넌트 기반이다. Virtual DOM 방식이다. 가볍고 빠르다.
vue는 단일 파일 컴포넌트이다. html, css, javascript코드가 하나의 파일에 모두 정의하는 방식이 기본이지만, 컴포넌트화 해서 사용할 수 있음!!
HTML 기반 템플릿 구문을 가진다. -> 배우기 쉬움
vue에서의 라이프사이클?
creation , mounting, updating, destruction으로 나눌 수 있다.
creation
- 컴포넌트가 돔에 추가되기 전이다.
- created : data와 events가 활성화 되어 접근 가능, 템플릿과 가상돔은 마운트 및 렌더링되지 않은 상태
- 주로 초기에 세팅되어야할 데이터 fetch작업은 created단계 사용
mounting - mounted : 초기 렌더링 직전에 컴포넌트에 직접 접근 할 수 있다.
- 컴포넌트, 템플릿, 렌더링된 돔에 접근 가능
updating - updated : 데이터가 변하여 재 렌더링이 일어난 후에 실행
destruction - destroyed : 뷰 인스턴스가 제거 된 후에 호출
출처
