⭐️ useRef에 대해 설명해주세요.
- useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다.
- 자바스크립트를 사용할 때에, 우리가 특정 DOM을 선택하기 위해 querySelector등의 함수를 사용한다.
- React를 사용하는 프로젝트에서 DOM을 직접 선택해야하는 상황이 필요한데 이때 useRef라는 React Hook을 사용한다.
[참고링크]
⭐️ useEffect의 실행 순서에 대해 설명해주세요.
- 하위에 있는 컴포넌트가 먼저 실행된다.
예시코드
function App() {
useEffect(() => {
console.log(1);
}, []);
return ...
}
const OuterBox: FC = () => {
useEffect(() => {
console.log(2);
}, []);
return ...
};
const InnerBox: FC = () => {
useEffect(() => {
console.log(3);
}, []);
return ...
};//실행결과
3
2
1
Suspense를 사용해 비동기처리에서 로딩을 할 때 순서는?
예시코드
function App() {
useEffect(() => {
console.log(1);
}, []);
return ...
}
const OuterBox: FC = () => {
useEffect(() => {
console.log(2);
}, []);
return (
<>
<h2>Outer BOX</h2>
<Suspense fallback={<div>loading...</div>}>
<InnerBox />
</Suspense>
</>
);
};
const InnerBox: FC = () => {
// 깃허브 stars 수를 갖고오는 비동기 요청
const repoStars = useRecoilValue(getStars);
useEffect(() => {
console.log(3);
}, []);
return ...
};//실행결과
2
1
3
- 3은 가장 하위 컴포넌트임에도 왜 가장 마지막에 실행될까?
- useEffect는 컴포넌트의 렌더링이 완료되면 실행되기 때문에 3이 가장 마지막에 실행된다.
InnerBox에서 비동기 요청을 할 때 Suspense한테 렌더링을 interrupt당하기 때문에 OuterBox, App이 먼저 실행 되고 비동기 요청이 완료된 시점에 InnerBox가 렌더링이 되면서 3이 출력된 것이다.
- useEffect는 컴포넌트의 렌더링이 끝나면 실행된다.
[참고링크]
⭐️ var, let, const의 차이에 대해 알려주세요.
1. 변수 선언 방식
var
- 변수 선언 방식에서 큰 단점
- 변수를 여러번 선언해도 에러가 나오지 않고 각기 다른 값이 출력된다.
- 이는 유연한 변수 선언으로 간단한 테스트에는 편리할 수 있겠으나, 코드량이 많아지면 어디에서 어떻게 사용될지 파악하기 힘들고 값이 바뀔 우려가 있다.
var name = 'bathingape'
console.log(name) // bathingape
var name = 'javascript'
console.log(name) // javascript
let
- 변수 재선언이 되지 않는다.
- 변수를 여러번 선언하면 이미 선언되었다는 에러 메세지가 나온다.
- 변수에 재할당이 가능하다.
let name = 'bathingape'
console.log(name) // bathingape
let name = 'javascript'
console.log(name)
// Uncaught SyntaxError: Identifier 'name' has already been declared
name = 'react'
console.log(name) //reactconst
- 변수 재선언, 변수 재할당 모두 불가능하다.
const name = 'bathingape'
console.log(name) // bathingape
const name = 'javascript'
console.log(name)
// Uncaught SyntaxError: Identifier 'name' has already been declared
name = 'react'
console.log(name)
//Uncaught TypeError: Assignment to constant variable.2. 호이스팅
- 호이스팅: var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.
[참고링크]
⭐️ Async/Await와 Promise의 차이에 대해 설명해주세요.
- 둘 다 비동기 처리를 다룰 수 있는 방법이다.
Promise
- 자바스크립트에서 비동기 처리에 사용되는 객체이다.
- 내용은 실행 되었지만 결과를 아직 반환하지 않은 객체라고 이해해도 좋다.
- Pending (대기)
- Fulfilled (이행)
- Rejected (실패)
비동기 처리가 완료 되지 않았다면Pending, 완료 되었다면Fulfilled, 실패하거나 오류가 발생하였다면Rejected상태를 갖는다.
Async/Await
- 가장 최근의 나온 비동기 처리 문법으로 기존의 callback 이나 Promise 의 단점을 해소하고자 만들어졌다.
- callback 이나 Promise 의 경우에 단점은 꼬리에 꼬리를 무는 코드가 나올 수도 있다는 부분이다. 흔히들 콜백 지옥, then() 지옥이라고 부른다.
- await 를 통해 Promise 반환 값을 받아 올 수 있다.
- async/await 를 사용하기 위해서는 선행되어야 하는 조건이 있는데, await 는 async 함수 안에서만 동작한다.
차이점
에러 핸들링
- Promise 를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야 한다.
코드 가독성
- Promise의 .then() 지옥의 가능성
- 코드가 길어지면 길어질수록, async/await 를 활용한 코드가 가독성이 좋다.
- async/await 은 비동기 코드가 동기 코드처럼 읽히게 해준다. 코드 흐름을 이해 하기 쉽다.
[참고링크]
개발 기록장