React 기본상식
React
개발 기본 상식
출처 : https://github.com/junh0328/prepare_frontend_interview/
리액트는 라이브러리인가요 프레임워크 인가요?🔥
라이브러리.
1) 프레임워크 : 원하는 기능 구현에 집중하여 개발할 수 있도록 필요한 기능을 갖추고 있는 것, 일정한 형태를 가지고 다양한 형태의 결과물을 만드는 것
2) 라이브러리 : 소프트웨어를 개발할 때 프로그래밍 사용하는 비휘발성 자원의 모임, 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것
둘 다 공통의 기능을 사용하여 결과물을 만드는 것으로 비슷해 보이지만, 둘의 차이점은 어플리케이션의 제어 흐름의 권한을 누가 가지고 있느냐가 핵심이다.
1) 프레임워크 : 정해진 프로그램의 틀에 맞게 사용자가 필요한 기능을 입력함
2) 라이브러리 : 호출하는 개발자가 필요한 기능을 원할 때 호출함
프로그램 흐름에 작업을 추가하거나 그렇게 하지 않음으로서 프로그램의 흐름을 바꾸는 것이 가능하기 때문에 React가 라이브러리라고 할 수 있는 것이다.
리액트를 사용하는 이유🔥🔥
흔히 우리가 자주 보는 Instagram, facebook 같은 사이트의 새로고침이 없이 변경되는 모습, 마치 앱처럼 보이는 동적인 웹 페이지 SPA(Single Page Application), CSR(Client Side Rendering)의를 사용한 페이지라고 할 수 있습니다.
SPA는 HTML, CSS, Javascript 파일을 최초 1회만 로드하고, 이후에는 자바스크립트 파일을 통해 DOM 또는 필요한 HTML 파일을 조작하는 방식을 말한다. 이는 서버로부터 완전한 새로운 페이지를 불러오지 않고, jsp파일 없이 index.html파일 하나에서 js, css등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이 특정영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념이다.
- Virtual DOM의 존재
- React Native의 앱 개발 가능
- 수 많은 커뮤니티
- Component 단위 작성
virtual DOM에 대해서 아나요?🔥🔥
기존의 DOM은 페이지가 바뀔 때마다, 새 HTML를 로드하면서 DOM 전체를 바꾸게 됩니다.
Virtual Dom은 React 컴포넌트가 리턴하는 값에 의해 만들어져서 실제 보이고 있는 DOM과 비교해서 달라진 부분만 찾아내어 바꾸게 됩니다. 이러한 Virtual DOM 때문에 React에서 컴포넌트 단위의 개발이 가능하게 됩니다.
함수 컴포넌트와 클래스 컴포넌트의 차이 🔥
클래스형 : state, lifeCycle 관련 기능사용이 가능하다. 메모리 자원을 함수형 컴포넌트보다 조금 더 사용된다. 임의 메서드를 정의할 수 있다
함수형: state, lifeCycle 관련 기능사용이 불가능하다, [대신 Hook을 통해 해결] 메모리 자원을 클래스형 컴포넌트보다 덜 사용한다. 컴포넌트 선언에 좀 더 편하다.
리액트에서 함수형 컴포넌트라고 부르지 않고 함수 컴포넌트라고 부르는 이유가 무엇인가요 🔥
함수 컴포넌트는 참조 투명할 수도, 아닐 수도 있기 때문에 ‘함수형’ 수식어를 붙이는 건 오해를 일으킬 수 있다. 아마 그래서 React는 ‘functional component’ 대신 ‘function component’라고 이름 지었을 것이다. 함수 컴포넌트를 함수형 컴포넌트라고 부르는 사람들은 최소한 부주의하고 무책임하거나 아마도 자신이 다루는 기술을 충분히 이해하지 못하고 있는 것이다.
props와 state의 차이🔥
Props와 State React에서 구성 요소가 데이터를 받거나 처리하고 보내기 위해 사용됨.
Props 불변의 데이터 부모로부터 전달되는 변경 불가 State (상태) 가변 데이터 구성 요소에 의해 유지 변경 가능 Props와 State 차이점 State는 내부 (컴포넌트)에서 생성하고 활동하고, 데이터를 변경할 수 있음.
Props는 외부(부모 컴포넌트)에서 상속 받는 데이터이며, 데이터를 변경할 수 없음.
Props가 컴포넌트간에 전달받는 것이라고 했는데 자식에서 부모로도 전달할 수 있는가 🔥
부모 컴포넌트에서 설정할 수 있으며, 부모에서 자식으로만 데이터를 줄 수 있다. (자식이 props를 통해 부모에게 데이터를 줄 수 없다는 뜻이다.) 자식에서 부모로 데이터를 전송하는 방법 = 함수를 이용한다. 자식은 props를 사용해서 부모에게 데이터를 건네줄 수 없다. 따라서 부모가 함수를 넣어 props로 자식에게 넘겨주면, 자식이 데이터를 파라미터로 넣어 호출하는 방식으로 동작한다. 즉, 부모가 props로 함수를 넣어주면 자식이 그 함수를 이용해 값을 건네주는 방식이다.
FLUX에 대해서 아나요? 🔥🔥
어디서 어느 방향으로 데이터가 전달될지 알지 못할 정도로 혼란한 MVC 패턴의 복잡성을 해소하기 위해, Flux 패턴에서는 데이터가 한 방향으로만 흐르도록 했다.
에서도 사용자가 View를 통해서 클릭 같은 액션을 발생시킬 수 있다. 그런 경우도 고려하면 아래와 같은 흐름이 만들어진다.
리덕스에 대해서 아나요? 🔥🔥
이런식으로 Action -> Reducer -> Store 를 거쳐 Client (App) 에 도달하게 된다.
리덕스는 가장 사용률이 높은 상태관리 라이브러리로써
위에 언급한대로 리액트의 복잡한 컴포넌트 구조속에서 보다 간편하게 모든 컴포넌트들이 state 를 쉽게 공유할 수 있게 해주는 방식이다. 우선 리덕스는 리액트 내부에 있는 기술이 아니며 순수 HTML, JAVASCRIPT 내에서도 사용이 가능하다. 컴포넌트에 집중된 리액트와 시너지가 좋으니 대체적으로 리액트에 리덕스를 사용할 뿐이다.
Action
여기서 액션은 특별한 계층이라고 하기는 어려워보인다. 이 구조에서 이 Action은 정확히 Action Creator라고 생각하면 된다. 위에서 말한 것 같으면 클릭 같은 이벤트가 발생했을 때 그 이벤트가 발생했음을 Action 정보를 담고 있는 객체를 만들어내 Dispatcher에 전달하는 역할을 한다.
Dispatcher
Dispatcher는 들어오는 Action 객체 정보를 받아 실제로 어떤 행동을 할지 결정하는 곳이다. 주로 switch 문으로 들어오는 Action 객체를 나누어 처리한다. 미리 정해둔 Action 객체의 type 을 구분해 미리 작성해둔 명령들을 수행한다. 흔히 쓰이는 표현으로 Dispatcher는 중앙 허브 역할을 하고 있다고 한다. Dispatcher에서는 주로 Store에 있는 정보에 접근해 수정하는 명령이 많다. 이때 상태 관리와 관련한 문제가 있을 수 있다. Store에 있는 상태 사이의 의존성이 있을 경우 이를 관리하는 것도 Dispatcher가 하는 일이다.
Store
데이터, 상태를 담고 있다. React에서 우리는 이 Store를 Dispatcher와 연결해 Store에 접근할 수 있도록 callback 명령을 제공할 수 있다. 또한 여기서 가지고 있는 상태에 View가 접근하고, 상태가 변경되면 View에서도 이를 반영한다.
View
View는 우리가 알고 있는 그 View의 역할을 일단 하고 있다. Store에서 어떤 이벤트(변경 등)가 발생하면 View는 변경된 점을 가져오고, 이를 바탕으로 화면을 다시 랜더링한다. 언젠간 다룰 날이 오겠지만 이 랜더링을 어떻게 처리하느냐가 성능에 큰 영향을 끼친다. React에서 View는 특이하게도 언제나 보여주는 역할만을 하는 것은 아니다. Controller-View라는 존재가 있을 수 있는데, 이는 상위에서 하위 View들에게 어떤 상태나, Dispatcher 등을 제공하기 위해서 하위 View를 감싸는 형태로 존재한다. 그런 방식으로 감싸면 굳이 하위 View로 계속 넘겨주는 불편함을 겪을 필요가 없어져서 적절히 활용하면 도움이 된다.
리덕스의 기본 원칙은? 🔥🔥
1. 어플리케이션 상태는 모두 한곳에서 집중관리된다.
여기서 말하는 한곳이란, Store를 의미한다. 별도의 컴포넌트마다 동기화가 필요없이 store에서 각각에 연결되어 있는 컴포넌트에게 일괄적으로 처리를 하게된다.
2. 상태는 불변하며, 오직 Action 만이 상태교체를 요청할 수 있다.
상태는 불변데이터이다. 만약 상태를 교체해야되는 상황이 생긴다면, 그 요청은 Action 에서만 가능하다. 그리고 그 요청으로 Reducer 가 상태를 변경해준다.
3. 변화는 순수함수 (Reducer) 로 작성되어야 한다.
Action 에 의해 상태 트리가 어떻게 변화하는지를 지정하기 위해 Reducer 를 작성해야 한다. Reducer 는 이전 State와 Action을 받아 다음 상태를 반환하는 순수함수이다. 이전 상태를 변경하는 것이 아니라, 새로운 상태 객체를 생성해서 반환해야한다는 사실을 기억해야 한다.
React에서 state의 불변성을 유지하라는 말이 있는데 이에 대해 설명해달라 🔥
만약 원시타입이 아닌 객체타입의 데이터를 어떠한 변수에 할당하고 그 변수를 다른 변수에 다시 할당했다면, 배열의 복사가 이루어지는 것이 아니라 같은 참조값을 갖게 된다. 그래서 만약 사본을 수정하면 원본도 함께 수정이 되어버린다.
특정 컴포넌트가 업데이트를 할 필요가 없다는 것을 어떻게 판단할 수 있을까? 가장 간단한 방법은 컴포넌트가 갖고 있는 데이터(props, state)의 이전 이후 값을 완전히 비교하는 것이다.
불변성이 지켜지지 않으면 객체 내부의 값이 새로워져도 바뀐것을 감지하지 못한다.
리듀서 내부에서 불변성을 지키는 이유는? 전개 연산자의 단점을 해결할 수 있는 방법은 무엇인가 🔥
리액트 사용시에 부수효과로 인해 생기는 문제점이 있다면 🔥🔥
부수 효과를 일으키는 함수 (불순 함수)
부수 효과를 일으키지 않는 함수 (순수 함수)
요약
컴포넌트의 라이프 사이클 메서드 🔥🔥
이해 메서드 종류 🔥 Hooks의 종류 🔥🔥
useState useEffect useReducer useMemo useCallback useRef 커스텀 Hooks useMemo와 useCallback의 차이를 아나요 🔥🔥
리액트에서 setState는 비동기 동작인가요 동기 동작인가요? 🔥
setState가 비동기 동작을 취했을 때 얻을 수 있는 이점은 무엇인가요? 🔥
useLayoutEffect는 무엇인가요? 🔥
리액트의 성능개선 방법에 대해서 설명해주세요
컴포넌트에서 이벤트를 실행시키기 위해서는 어떻게 핸들링해야 하나요?🔥
SPA가 뭔가요?🔥
SPA의 단점 SSR이 뭔가요?🔥
SEO가 뭔가요?🔥
TTV, TTI 하이드레이션에 대해 알고 있나요 🔥
Next의 렌더링 수행 방식 🔥
Next를 쓴 이유가 있나요 ? 🔥
Next를 구성하는 기본 설정 파일에 대해서 알고 있나요? 🔥
사전 렌더링을 위해 사용해 본 함수가 있나요 🔥