• JSX
Javascript XML. 리액트의 UI를 컴포넌트화하기 위해 XML 형태의 JSX 코드를 babel이 Javascript로 변환 시켜주는 구조이다. 기본 규칙은 다음과 같다.
1 ) 태그가 열리면 반드시 닫혀야 한다.
2 ) return할 내용이 두 개이상의 태그를 가진다면 큰 하나의 태그로 감싸야 한다.
<div>
<h1></h1>
<span></span>
</div>3) 변수 값을 사용할 땐 {}로 감싼다.
4) 주석은 {/* */}로 감싸야 한다.
• Context API
여러 컴포넌트를 통해 전달된 전역적 state 값의 단계가 많아지면 로직이 매우 복잡해지는 경우가 있다. 부모 컴포넌트가 자식 컴포넌트에게 자신의 상태값을 props로 넘겨줘야 할때 특히 그렇다. 이 때 전역변수의 값(인스턴스, 함수, DOM도 가능)을 관리하기 위해 Context API가 도입되었다.
const example = React.createContext(true);React.createContext()와 그 안의 초기값을 통해 선언한다.
• props drilling
최상위 컴포넌트의 state 값에서 가장 하위 단계 컴포넌트에 props를 전달할 때, 중간 단계의 컴포넌트에도 불필요하게 props를 쭉쭉 내리꽂듯이 전달해야 하는 패턴을 정의한다. 중간 전달 단계가 깊어질수록 의존성이 높아진다. 이런 비효율성을 해결하기 위해서 개별 컴포넌트가 접근할 수 있는 전역값 상태관리 컨테이너 Redux나 Context API를 사용한다.
• Redux - Context API 차이점
기본적으로 리덕스는 Context API에 기초를 두고 만들어진 컨테이너라 방향은 같지만 다음과 같은 차이점을 보인다.
1 ) 사용자 액션 직렬화 => 버그 리포트 관리가 용이하다.
2 ) 액션에 대한 객체를 네트워크에 전송 => 협업이 편하다.
3 ) state 값을 서버에 넣어놓고 요청시 HTML에 담아 클라이언트로 보낼 때 최적화되어 있다.
• state - setState
setState()는 컴포넌트의 상태값 객체를 업데이트하는 역할이다. state 변경시 컴포넌트가 리렌더링된다.
• React Hook
기존 클래스형 컴포넌트에서만 사용이 가능하던 상태값 관리나 Life Cycle 함수를 함수형 컴포넌트에서도 사용할 수 있도록 도입한 기능이다. 또 Class는 사람과 컴퓨터간의 혼동을 불러오며 컴포넌트 사이에 공유되는 상태나 로직을 재활용하기 어려운 점이 있다.
코드의 길이가 짧아지고 가독성(복잡성을 줄여서)이 좋아지며 로직의 재활용성을 개선한다. 그리고 정적 타입인 타입스크립트와 함께 쓰기 좋다.
하지만 컴포넌트간 의존성 증가와 클래스형 컴포넌트에서 사용이 힘든 단점이 있다.
문제 모음 링크)
https://velog.io/@dojunggeun/React-interview-questions-15
https://bigstar-vlog.tistory.com/63
https://blex.me/@yoyounn18/프론트엔드-직군-웹개발자-면접질문-모음-답변-달아보기
https://realmojo.tistory.com/300
https://velog.io/@tmmoond8/프론트엔드-개발자-인터뷰-후기-면접-질문-정리-작성-중?fbclid=IwAR3JbJ-XCgDnH5Ji4PAtFq8vRF9KKQA6KDhs9BsewVbyoexacfpqk45Tnh4
참고)
JSX
https://velog.io/@jellyloveschoco/React-JSX%EB%9E%80
https://react.vlpt.us/basic/04-jsx.html
Context API
https://velopert.com/3606
https://react.vlpt.us/basic/22-context-dispatch.html
https://velog.io/@i_thank/React-Context-API
prop drilling
https://velog.io/@kimu2370/리덕스없이-상태-관리하기hookscontext
https://velog.io/@cada/React-Redux-vs-Context-API
https://velog.io/@leobit/Redux
state - setState
https://ko.reactjs.org/docs/faq-state.html
https://ko.reactjs.org/docs/react-component.html#setstate
React Hook
https://medium.com/@dayong/리액트-훅-react-hooks-1-간단한-소개-eb02161b3ce4
https://ddwroom.tistory.com/75
https://velog.io/@velopert/react-hooks
https://ko.reactjs.org/docs/hooks-intro.html
