Before You Learn
- 서버에서 정의한 API 문서를 통해, 서버가 제공하는 리소스를 이용할 수 있다.
- API 테스팅 툴 Postman을 이용할 수 있다.
- AJAX 통신을 가능하게 하는 fetch API를 이용할 수 있다.
- UI를 구성하고, 컴포넌트를 분리할 수 있다.
- React의 props와 state 개념을 이해할 수 있다.
- 무엇을 React state(상태)로 두어야 하는지 알 수 있다.
Achievement Goals
React 데이터 흐름
- React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.
- 어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.
- State 끌어올리기의 개념을 이해할 수 있다.
- 상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다.
Effect Hook
- Side effect가 어떤 의미인지 알 수 있다.
- React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)
- Side effect의 예를 들 수 있다.
- Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.
- Effect Hook에서의 dependency array 사용법을 이해할 수 있다.
- 컴포넌트 내에서 네트워크 요청 시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다.
면접 예상 질문
- 리액트 개발 방식의 큰 특징 중 하나를 말씀해주세요. ->
페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점.
- ! 양방향 데이터 흐름과 단뱡향 데이터 흐름이 있는데
단뱡향 데이터 바인딩의 장점과 단점
장점 : 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신 가능,
데이터 흐름이 단방향(부모->하위 컴포넌트)이라, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉬움
단점: 변화를 감지하고 화면을 업데이트 하는 코드를 매번 작성해야함
https://velog.io/@sunaaank/data-binding
- ! state와 props의 차이는 무엇인가요?
props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다. props는 수정될 수 없으며
표시되거나 다른 값을 계산하는데만 사용됩니다. state는 컴포넌트의 생명 주기 동안 수정될 수 있는 내부 데이터로, 다시 렌더링해도 유지됩니다..
상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다.
- Side effect에 대해 설명해주세요
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수를 Side Effect가 있다고 이야기 함
- pure function에 대해 설명해주세요
오직 함수의 입력만이 함수의 결과에 영향을 주는 함수
순수 함수는 입력으로 전달된 값을 수정하지 않음
어떤 함수가 fetch API를 이용해 AJAX 요청을 한다고 가정해봅시다. 이 함수가 순수함수가 아닌이유는?
네트워크 상황, 서버상태에 따라 응답코드가 달라지기 때문에 예측 불가능하기 때문입니다.
- useEffect 가 뭔가요
useEffect는 컴포넌트 내부에서 불러오며 (effect를 통해 state변수에 접근할수있게하기위해)
react에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말하려고 함. Effect hook이 실행됨
우리가 넘긴 함수를 기억했다가(이 함수를 effect라고 부름) DOM 업데이트를 수행한 이후에 불러냄.
- useEffect에 대해 설명해주세요.
useEffect 함수는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 실행할 수 있도록 하는 Hook입니다.
useEffect는 컴포넌트가 마운트 됐을 때, 혹은 언마운트되거나 업데이트 됐을 때, 특정 작업을 처리할 수 있습니다.
즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것입니다.
useEffect Hook을 사용할때는 첫 번째 인수로 실행할 콜백함수를 넣고, 두 번째 인수로 검사하고자하는 특정 값이나 빈 배열을 넣습니다.
https://ko.reactjs.org/docs/hooks-effect.html
- hook을 쓸 떄 주의할 점이 뭔가요
최상위에서만 Hook을 호출할수 있음
React 함수 내에서 Hook을 호출해야 함
- 컴포넌트가 처음 생성될 때만 effect 함수가 실행되게 하려면 어떻게 해야 되나요?
- 어떤 상황에서 유용하게 쓰일까요? 외부 API를 통해 리소스를 받아오고 더 이상 API 호출이 필요하지 않을떄에 사용
-! 왜 state를 직접 변경하지 않고 setState를 이용하나요?
만약 컴포넌트의 state를 직접 변경하려고 시도한다면, 리액트는 컴포넌트를 다시 렌더링해야 하는지 알 수 있는 방법이 없습니다. setState() 메소드를 사용하면 리액트는 컴포넌트의 UI를 업데이트할 수 있습니다.
https://velog.io/@dojunggeun/React-interview-questions-15
보너스로, 어떻게 state의 변경이 반드시 동기적으로 이루어진다고 보장되지 않는지 이야기해볼 수 있습니다. 컴포넌트의 state를 다른 state(또는 props)를 기반으로 변경해야 하는 경우, state와 props를 두 인자(arguments)로 사용하는 setState()에 함수를 전달하면 됩니다:
-! React hooks는 무엇인가요?
Hooks는 클래스 기반 컴포넌트의 장점(예를 들면 내부 state와 생명주기 메소드)을 함수형 컴포넌트로 가져오려는 리액트의 시도입니다.
| 함수형 컴포넌트의 단점 | state를 갖지 못하므로 setState 사용불가 life-cycle 함수 사용 불가 |
https://velog.io/@dojunggeun/React-interview-questions-15
-! React hooks의 장점은 무엇인가요?
React에 hooks를 도입해서 얻을 수 있는 여러 이점들은 다음과 같습니다:
클래스 기반 컴포넌트, lifecycle hooks, this의 필요성이 사라집니다
공통 기능을 커스텀 hook로 만들어서 로직을 재사용하기 쉬워집니다.
컴포넌트 자체에서 로직을 분리할 수 있어서 읽기 쉽고 테스트하기 쉬운 코드를 작성할 수 있습니다.
https://velog.io/@dojunggeun/React-interview-questions-15
-! React의 라이프사이클에 대해 설명해주세요.
React의 클래스형 컴포넌트에서 사용하는 LifeCycle API는, 컴포넌트가 DOM 위에 생성되거나 사라질 때, 혹은 업데이트될 때 호출되는 API입니다.
'코딩공부 > T.I.L' 카테고리의 다른 글
| 2022-02-07 Side Effect (0) | 2022.02.07 |
|---|---|
| 2022-02-07 State 끌어올리기 (0) | 2022.02.07 |
| 2022-01-28 Message States Server REST API (0) | 2022.01.28 |
| 2022-01-28 Postman으로 날씨 받아오기 (0) | 2022.01.28 |
| 2022-01-28 API test tools / Postman 사용하는 방법 (0) | 2022.01.28 |