[REACT] 프론트엔드 기술면접 개념 정리

 

🔆 React

: 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기위해 사용하는 웹 프레임 워크 이다.

 

🖇️ React의 원리, 특징, 장단점

: 리액트는 데이터의 흐름이 한방향으로만 흐르는 단방향 데이터 흐름을 가지고있다.

• UI를 여러 컴포넌트로 쪼개서 만든다. 전체 코드를 파악하기 쉬우며 유지보수 및 관리가 용이하고, 재사용성이 높다.

• 리액트를 이용하면 동적인 UI를 쉽게 만들수 있다.

---

🖇️ Javascript + XML

• 자바스크립트에 HTML 태그를 끼얹은 문법
  HTML 태그 안에선 중괄호 {}를 사용해서 JS를 쓸 수 있다.

const apple = "사과"
const title = <h1>{apple} 드실분?</h1>

 

---

🖇️ Component

• 화면을 이루는 '요소'로 여러 곳에서 재사용 가능한 UI 코드 조각이다.
• 개발하다가 특정 부분에서 버그가 일어나면 그 컴포넌트만 수정하여 사용할 수 있다.
  그래서 코드의 재사용성과 유지보수성을 증가시켜준다.
• 리액트 데이터의 흐름은 단방향으로 이뤄진다. 즉, 부모에서 자식으로 한방향으로만 데이터를 props를 사용하여 공유해줄 수 있다.

Props

• 프로퍼티의 줄임말이고 부모 컴포넌트에서 -> 자식 컴포넌트로 데이터를 전달해주는 개념이다.
• 자식 컴포넌트에서 전달 받은 props는 읽기 전용이고 Props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.

State

• 컴포넌트의 상태를 나타내고 동적인 데이터를 다룰 때 사용한다.
• useState 함수로 상태를 추가할 수 있다.
• const [상태명, 상태변경함수명] = useState(초기값);

💡 Props와 State의 차이에 대해 설명해주세요.

: props는 받은 데이터 이거나 생성된 데이터, 즉 데이터의 기원이 자기 자신이 아닌 것이고, state는 자기자신의 컴포넌트에서 만들어낸 데이터

 

💡 왜 state를 직접 바꾸지 않고 setState (useState)를 사용해야 하나요?

: 직접 state를 수정하면 리액트는 render 함수를 호출하지 않아서 렌더링이 일어나지 않고 setState를 호출하여 state를 변경하면 리액트 엔진이 render 함수를 이용해서 렌더링을 실행하기 때문입니다.

 

---

🖇️ 라이프 사이클 메소드

• 클래스형 컴포넌트에서만 사용되고, 컴포넌트가 브라우저상에 나타나고, 업데이트 되고, 사라지게 될 때 호출되는 메서드들 이다.

---

🖇️ SPA (Single Page Application)

사용자가 한 페이지의 머무르면서 새로운 페이지로 바뀔 때 마다 필요한 정보만 추가적으로 받아와(새로고침 없이) 부분적으로 업데이트한다.

• 첫 화면 로딩 시간이 다소 길다는 점이 있다.
• 라우팅에 따라 다른 뷰를 보여줄 수 있다.

---

🖇️ Virtual DOM

: 가상의 DOM 이며 실제로 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM이다.

• 상태가 업데이트되면 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해서 렌더링 한다. 그러고나서 실제 브라우저에 보여지고 있는 DOM과 비교후 차이가 있는곳을 감지하여 실제 DOM에 패치 시켜준다.

: 변경될 구성 요소가 바뀌면 전체가 렌더링이 되는데 매우 비효율적이라고 볼 수 있다.
그래서 리액트를 사용하는 이유중 하나가 바로 Virtual DOM 이다.
Virtual DOM은 기존 DOM과 변경될 Virtual DOM의 차이를 판단하고 변경된 구성요소만 찾아 그부분만 렌더링이 된다.

 

---

🖇️ Key Props

: 하나의 JSX 태그는 자바스크립트 객체로 구성되는데 이 객체에는 해당 객체가 Virtual DOM의 요소임을 확인해주는 심볼값과 각각의 Virtual DOM를 고유하게 구분하는 key 값이 들어가게 된다.

그래서 map( ) 을 사용했을 때, 해당 리스트에 고유한 key값을 넣어줘야한다. 리액트는 이 key들의 비교를 통해 리스트의 요소가 추가되거나 삭제되었을 때 상태를 빠르게 감지하고 반영할 수 있다.

쉽게 말해 엘리먼트 혹은 컴포넌트의 변화를 감지하기 위함이고 이는 효율적인 DOM 사용으로 귀결된다.

 

---

🖇️ Hook

: 함수 컴포넌트에서 상태 관리 및 생명 주기 기능을 사용할 수 있게 해주는 리액트의 기능

 

💡함수형 컴포넌트의 장점에 대해 설명해주세요.

: 짧고 직관적인 코드를 짤 수 있고, hook을 사용할수있다는 점이 제일 큰 장점이다. 

useState

• 컴포넌트의 상태를 관리할 수 있다.
  상태에 따라 즉각적으로 다른 화면들을 출력해준다. (= 렌더링)

useEffect

• 컴포넌트가 렌더링 될 때마다 특정작업을 실행할수 있게한다.
• 사이드 이펙트를 감지하는 수행하고자 하는 작업, 검사 값이 변하면 콜백을 실행한다.

useEffect(수행하고자 하는 작업 함수, [검사 값])

 

componentDidMount: 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행.
componentDidUpdate: 리렌더링을 완료한 후 실행. 즉 render()가 업데이트될 때마다 실행
compoenntWillUnMount: 컴포넌트를 DOM에서 제거할 때 실행.

 

• Component가 Mount 되었을 때(나타날 때) = componentDidMount
• [deps]부분을 생략한다면 해당 컴포넌트가 렌더링 될 때마다 useEffect가 실행된다.

  useEffect(() => {
    console.log("렌더링 될때마다 실행");
  });

 

• 만약 맨 처음 렌더링 될 때 한 번만 실행하고 싶다면 deps위치에 빈 배열을 넣는다.

useEffect(() => {
    console.log("맨 처음 렌더링될 때 한 번만 실행");
  },[]);

 

• Component가 Update 되었을 때(props, state 변경) = componentDidUpdate

  useEffect(() => {
    console.log("name이라는 값이 업데이트 될 때만 실행");
  },[name]);

 

• Component가 사라질 때 & Update 되기 직전에 =compoenntWillUnMount
• 언마운트 될 때만 cleanUp 함수를 실행시키고 싶다면 deps에 빈배열을 넣으면 된다.

• 특정 값이 업데이트 되기 직전에 cleanup 함수를 실행시키고 싶다면 deps에 해당 값을 넣어주면 된다.

  useEffect(() => {
    console.log("hello");
    return () => {
      console.log("cleanUp 함수");
    };
  });

 

🔥 유의사항

• useEffect는 첫 렌더링 후 실행된다.
• 최초에 한 번은 무조건 실행된다.

useRef

• 저장공간(변수 관리) 또는 DOM 요소에 접근하기 위해 사용한다. ref(= 참조: reference)

useMemo & useCallback

: useMemo를 통해 캐싱을 한 값을 메모리에서 꺼내와서 재사용한다. useMemo에 인자로 콜백함수를 넣어주면 함수가 리턴하는 값을 메모이제이션 하는 것이다.

: useCallback은 인자로 전달한 콜백 함수 그 자체를 메모이제이션 하는 것이다.

• 주로 렌더링 성능을 최적화해야 하는 상황에 사용한다. 

 

---

🖇️ 제어 컴포넌트 vs 비제어 컴포넌트

💡 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.

: 즉각적으로, 실시간으로 값에 대한 피드백이 필요하다 > 제어 컴포넌트 사용

즉각적인 피드백이 불필요하고 제출시에만 값이 필요하다, 불필요한 렌더링과 값 동기화가 싫다 > 비제어 컴포넌트 사용

 

리액트는 두 가지 방식으로 form의 입력을 처리한다.
바로 제어 컴포넌트와 비제어 컴포넌트로 나눌 수 있는데

🔥 (1) 제어 컴포넌트

• 사용자가 제어 컴포넌트에 데이터를 입력하면 변경 이벤트 핸들러가 호출되고 코드가 업데이트된 값으로 다시 렌더링이 된다. 대표적으로 form에 value 값을 useState로 관리해서 데이터를 최신화 하는 것이다.

const [inputValue, setInputValue] = useState('');

return (
 <input value={inputValue} onChange={(e) => setInputValue(e.target.value) />
)

이런식으로 텍스트 입력을 할 때마다 onChange의 콜백 호출에 따라서 form의 상태가 계속 즉각으로 렌더링 되는 것을 제어 컴포넌트라고 한다.

활용 예)

• form의 유효성 검사할 때 (아이디나 비밀번호 체크시)
• form에 데이터 값에 따라 버튼 상태를 disabled로 표시

 

🔥 (2) 비제어 컴포넌트

• 사용자가 폼 필드에 데이터를 입력하면 업데이트된 정보가 리액트에서 별도 처리할 필요 없이 엘리먼트에 반영된다.
  제어 컴포넌트는 useState로 관리하지만 비제어 컴포넌트는 ref로 관리한다.

const inputRef = useRef();

return (
<input ref={inputRef} value="hello" />
)

이처럼 ref를 활용해 입력 폼의 상태를 접근할 수 있다. button을 클릭할 때 ref를 통해 값을 얻을 수 있다.

활용 예)

• 불필요한 렌더링을 줄이고, 버튼을 클릭하여 제출할 때 값이 필요할 경우에 사용

---

🔆 상태 관리

💡 React에서 State를 어떻게 관리하나요?

: 리액트의 상태관리방법은 크게 2가지로 나뉩니다. 부모 혹은 자신이 직접 컴포넌트 안에서 관리하는 로컬 상태 방법과 로컬 상태의 불편함을 개선한 전역 상태 관리 방법이 있습니다.

🖇️ 로컬 상태 관리?

함수형 컴포넌트에서는 리액트 hook 과 props 를 사용하여 상태관리를 하는 방법. 하위 컴포넌트에 데이터를 전달하기 위해, props를 사용하는 데 어플리케이션의 크기가 점점 커질 수록 props drilling이 증가하여, 반복작업이 많아지고 유지 보수가 어려워지는 단점이 있다.

🖇️ 전역 상태 관리?

전역 상태는 프로젝트 전체의 상태관리를 총괄하는 방법으로, 대표적으로 Redux, recoil 등이 존재한다. 전역에서 관리하기 때문에, 어떤 컴포넌트에서든 상태 값을 반영하고, 변경시키는 것이 가능하다. props 과정이 생략되어, 작업이 적고 유지 보수가 간편해지는 장점이 있으나, 상태관리 오류시 나타나는 사이드 이펙트가 커지는 단점이 존재한다.

 

💡Props Drilling에 대해 설명과 해결방법을 말해주세요.

: Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다. 하지만 props의 전달이 많이질수록 코드를 읽을 때 해당 prop을 추적하기 힘들어집니다. 그렇기 때문에 유지보수도 더욱 어려워집니다.

🔥 해결방법? 첫 번째로 전역 상태관리 라이브러리 사용 / 두 번째로는 children 을 적극적으로 사용하는 것

 

🖇️ Redux

: props 없이 state(상태)를 공유할 수 있게 도와주는 라이브러리 - js 파일 하나에 state들을 보관할 수 있다.

• 상태를 예측 가능하게 만든다. (순수함수를 사용하기 때문)
• 유지보수 (복잡한 상태 관리와 비교)
• 디버깅에 유리 (action과 state log 기록 시) → redux dev tool (크롬 확장)
• 테스트를 붙이기 용의 (순수함수를 사용하기 때문)

• flux 아키텍처를 따른다.
  🔥 flux 구조란 ? 단방향 데이터 흐름을 가지는 구조.
  새로운 데이터를 넣으면 처음부터 다시 시작되는 방식으로 설계되어있다.
• 데이터 흐름은 dispatch -> store -> view 순서이다. view에서 입력이 발생하면 액션을 통해 디스패치로 향하게 된다.

---

🖇️ Recoil

: atom(상태의 단위) , selector(파생된 state를 저장)

• 가장 리액트스럽다. 리액트 hooks의 느낌으로 친숙하게 작업할 수 있고, 러닝커브가 낮다.
• 초기 세팅이 정말 간편하고 recoil 라이브러리 외에 따로 설치해야 될 것들이 없어서 좋다.
• 직관적이고 단순한 편이다.
• 디버깅 도구 지원이 미미하다.

---

🖇️ React-query

:  React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고업데이트하는 작업을 도와주는 라이브러리

• 🔥핵심 기능은 데이터 캐싱이다.🔥 데이터를 주고받은 결과를 캐시로 저장하여, 동일한 요청이 반복되어도 새로운 요청을 보내지 않고 저장되어 있는 데이터를 사용할 수 있습니다. 이는 네트워크 사용량을 줄이고, 애플리케이션 성능을 향상시키는 데 도움이 됩니다.
• 로딩 및 오류 상태 관리 (데이터가 로딩되었을 때와 오류 발생시 사용자에게 알려준다.)
• 게시판 같은 것을 만들 때 Pagination 기능을 사용하여 프리패칭(Prefetching)을 수행할 수 있다.
  🔥 프리패칭(Prefetching)이란 ? 다음 페이지 데이터를 미리 가져와서, 다음 페이지로 넘어갈 때 미리 데이터를 가져왔기 때문에 매끄럽게 처리 된다.

---

🔆 NextJS

: Next.js는 리액트에는 없는서버 사이드 렌더링server-side rendering(SSR), 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR)과 같은 다양한 기능을 제공하는 리액트를 위해 만든 프레임워크 이다.

 

🖇️ SEO(검색 엔진 최적화)

검색을 하면 검색엔진은 인덱싱해둔 수많은 웹 페이지 중 가장 적합한 순서대로 결과를 노출하는데 그중 

자신의 웹 페이지가 더 많이 노출되도록 최적화된 작업을 말한다.

 

---

🖇️ SSR (서버 사이드 렌더링)

: 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식

• 첫 페이지의 로딩시간이 CSR에 비해 짧다.
  이미 렌더링된 페이지를 서버에서 받아서 화면을 구성하기 때문이다.
• SEO 측면에서도 유리하다.
  검색엔진이 크롤링을 할 때 서버에 이미 하드코딩된 html 파일이 있기 때문에 검색엔진이 이 페이지가 어떤 역할을 하는지 파악하는데 용이하다.
• SSR은 서버 부하가 일어나니 필요에 따라 SSG와 ISR을 적절하게 쓰면 좋다.

장점

• 구글, 네이버, 다음 등의 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집해준다.
  ✔ 따라서 웹 서비스의 검색 엔진 최적화를 위해서라면 서버 사이드 렌더링을 구현 해주는 것이 좋다.
• 초기 렌더링 성능을 개선할 수 있다.
  예를들면, SSR이 구현되지 않은 웹 페이지에 사용자가 방문하면, JS가 로딩되고 실행될 때 까지 사용자는 비어 있는 페이지를 보며 대기해야한다.
  여기에 API까지 호출해야 한다면 사용자의 대기 시간은 더더욱 길어진다.
  반면 서버 사이드 렌더링을 구현한 웹 페이지라면 JS 파일 다운로드가 완료되지 않은 시점에서도 HTML상에 사용자가 볼 수 있는 콘텐츠가 있기 때문에 대기 시간이 최소화되고, 이로 인해 사용자 경험도 향상된다.

단점

• SSR은 결국 원래 브라우저가 해야 할 일을 서버가 대신 처리하는 것이므로 서버 리소스가 사용된다.
• 수많은 사용자가 동시에 웹 페이지에 접속하면 서버에 과부하가 생김.
  ✔ 해결방안 : 사용자가 많은 서비스라면 캐싱과 로드 밸런싱을 통해 성능을 최적화 해줘야한다.
• 개발이 어려워 질 수 있다.
  SSR을 하면 프로젝트의 구조가 좀 더 복잡해질 수 있고, 데이터 미리 불러오는 프리패칭과 코드 스플리팅 의 호환 등 고려해야 할 사항이 더 많아지기 때문이다.

🖇️ CSR (Client Side Render)

• 클라이언트가 데이터를 가져와서 그린다.
• 처음 로딩시 js파일의 용량이 클수록 로딩시간이 길다.
  하지만 초기에 로딩이 되고나면 페이지 간 이동 시 매우 빠른 속도로 전환되고, 페이지 이동 시 새로고침되는 현상도 사라진다(= SPA).

🖇️ SSG (Statice-Site Generation)

• 정적인 사이트를 생성한다 : 정적인 사이트를 데이터를 가져와서 그려준다.
  SSG을 담당하는 함수로는 getStaticProps라는 함수가 있다.

🖇️ ISR (Incremental Static Regeneration)

• 증분 정적 사이트를 재생성 한다. (특정 주기로) 정적인 사이트에 데이터를 가져와서 다시 그려준다.
  이걸 담당하는 함수는 getStaticProps 라는 함수다.
  값을 리턴하면서 동작한다.

---

 

 

 

 

❤️ 도움주신분 :

https://velog.io/@leemember/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B8%B0%EC%88%A0-%EB%A9%B4%EC%A0%91-%EB%8B%A8%EA%B3%A8-%EA%B0%9C%EB%85%90%EB%93%A4-%EC%A0%95%EB%A6%AC-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8E%B8