티스토리 뷰
1. JSON.parse(), response.json() 차이점을 설명해주세요
JSON.parse()와 response.json()은 둘 다 JSON 데이터를 다루는 데 사용되지만, 사용 환경과 역할에 차이가 있다.
1. JSON.parse()
- 주로 문자열 형태의 JSON 데이터를 파싱하는 데 사용된다.
- 입력으로 문자열을 받아 JavaScript 객체로 변환한다.
- 클라이언트 측 코드에서 JSON 데이터의 문자열 표현을 JavaScript 객체로 변환하는 데 사용된다.
- 예를 들어, API에서 가져온 문자열 데이터나 로컬 스토리지에서 가져온 JSON 문자열을 파싱할 때 사용한다.
const jsonString = '{"name": "Alice", "age": 30}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject); // { name: 'Alice', age: 30 }
2. response.json()
- response.json()은 Fetch API의 Response 객체에 포함된 메서드이다.
- HTTP 요청을 통해 응답받은 데이터를 JSON 형식으로 파싱하여 JavaScript 객체로 변환한다.
- response는 fetch() 함수의 반환값으로, HTTP 응답을 나타내며, response.json()을 호출하여 응답 본문을 JSON 형식의 JavaScript 객체로 파싱할 수 있다.
- response.json()은 비동기 함수로, Promise를 반환한다. 따라서 .then() 또는 async/await를 사용하여 결과를 처리해야 한다.
fetch('https://api.example.com/data')
.then(response => response.json()) // JSON 파싱
.then(data => {
console.log(data); // 파싱된 데이터 출력
})
.catch(error => {
console.error('Fetch failed:', error);
});
정리하자면 JSON.parse()는 문자열을 JSON 형식의 JavaScript 객체로 파싱할 때 사용되고, response.json()은 Fetch API를 통해 HTTP 응답을 JSON 형식의 문자열을 JavaScript 객체로 파싱할 때 사용된다.
2. useEffect 함수와 디펜던시 리스트가 있고 없고 차이를 설명해주세요
useEffect는 React의 함수 컴포넌트에서 사이드 이펙트를 처리하는 데 사용되는 훅이다.
useEffect는 두 번째 매개변수로 디펜던시(의존성) 리스트를 가질 수 있는데, 이 리스트가 있고 없고에 따라 효과의 실행 방식에 차이가 있다.
1, 디펜던시 리스트가 없는 useEffect
- useEffect의 두 번째 매개변수가 없는 경우, 코드는 컴포넌트가 마운트될 때와 컴포넌트가 언마운트될 때 호출된다.
- 즉, 컴포넌트의 수명 주기에서 처음 렌더링될 때와 언마운트될 때 사이드 이펙트가 실행된다.
- 이런 경우, 코드에서 상태나 다른 값의 변화에 반응하지 않고 항상 컴포넌트가 마운트 및 언마운트될 때 실행해야 하는 로직(예: API 요청, 이벤트 리스너 등록/해제)을 처리할 때 유용하다.
useEffect(() => {
console.log('컴포넌트가 마운트되었습니다.');
return () => {
console.log('컴포넌트가 언마운트되었습니다.');
};
}, []);
mount와 unmount
1. mount 는 어디에 쓰일까?
- 받아온 props를 객체의 state로 설정해줄때
- REST API로 작업을 처리할 때
- d3 video 같은 라이브러리를 사용할 때
- setInteval, setTimeout을 사용할 때
2 Unmount는 어디에 쓰일까?
- 뒷정리 함수라고 생각하면 된다.
- clearInterval, clearTimeout 라이브러리 인스턴스 제거
2. 디펜던시 리스트가 있는 useEffect
- 디펜던시 리스트는 이펙트가 실행될 조건이 되는 값이나 상태를 지정한다.
- 이를 통해 특정 상태나 값이 변경될 때 실행해야 하는 로직을 제어할 수 있다.
- 디펜던시 리스트에 있는 값이나 상태가 변경될 때마다 이펙트가 실행된다.
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`count가 ${count}로 변경되었습니다.`);
}, [count]); // count가 변경될 때마다 이펙트가 실행된다.
3. 오프셋 기반 페이지네이션, 커서 기반 페이지네이션에 대해 설명해주세요
페이지네이션(pagination)은 큰 데이터를 사용자가 보기 편하도록 작은 부분으로 나누어 여러 페이지로 표시하는 것을 뜻한다. 여러 개의 게시물을 보여주는 웹사이트에서 보통 화면 하단에서 흔히 볼 수 있는 UI입니다.
주요한 페이지네이션 방식은 오프셋 기반 페이지네이션과 커서 기반 페이지네이션이다.
1. 오프셋 기반 페이지네이션 (Offset-Based Pagination)
- 개념: 오프셋 기반 페이지네이션은 요청할 페이지의 시작 지점을 지정하고, 원하는 크기만큼 데이터를 가져오는 방식이다.
- 요청 방법: 요청 시 시작할 위치(오프셋)과 페이지 크기를 지정한다. 예를 들어 ?offset=20&limit=10은 20번째 항목부터 10개의 항목을 요청한다.
- 장점:
- 구현이 비교적 간단하고 이해하기 쉽다.
- 단점:
- 페이지가 멀어질수록 응답 시간이 길어질 수 있다. 데이터베이스는 높은 오프셋을 가진 요청의 경우 많은 데이터를 건너뛰어야 하기 때문이다.
- 데이터의 양이 많을 경우 성능 저하가 발생할 수 있다.
- 데이터가 동적으로 변할 경우, 페이징의 데이터가 불일치할 수 있다.
2. 커서 기반 페이지네이션 (Cursor-Based Pagination)
- 개념: 커서 기반 페이지네이션은 데이터의 특정 지점을 나타내는 커서를 사용하여 페이지네이션을 수행한다. 요청 시 이전 페이지의 마지막 항목 또는 다음 페이지의 첫 번째 항목을 나타내는 커서를 포함한다.
- 요청 방법: 요청 시 커서와 페이지 크기를 지정한다. 예를 들어, ?cursor=abc123&limit=10은 abc123 커서부터 10개의 항목을 요청한다.
- 장점:
- 데이터베이스는 특정 커서에서부터 데이터를 가져올 수 있기 때문에 오프셋 기반 페이지 네이션보다 대량의 데이터에 대해 더 나은 성능을 제공한다.
- 데이터의 동적인 변경에도 안정적으로 작동한다.따라서 데이터 일관성을 유지할 수 있다.
- 단점:
- 구현이 비교적 복잡하다. 커서를 사용하여 다음 페이지를 요청해야 하므로 데이터베이스 쿼리와 로직이 더 복잡할 수 있다.
- 데이터의 순서가 중요하기 때문에, 정렬이 일관되지 않으면 문제가 발생할 수 있다.
비교
- 오프셋 기반 페이지네이션은 구현이 간단하지만 대량의 데이터와 동적인 데이터 환경에서 성능 저하와 데이터 불일치 문제가 발생할 수 있다.
- 커서 기반 페이지네이션은 성능과 데이터 일관성이 우수하지만 구현이 비교적 복잡하다.
4. 비동기 상황에서 state값을 변경할때 주의 해야하는 이유와 해결법 설명해주세요.
const [state,setState] = useState(initalState)
useState hook을 사용할 때, 배열의 첫번째 순서는 상태(state) 이고, 두번째는 상태를 업데이트하는 상태 업데이트함수(setState)이다. useState 내부에는 initalState, 즉 상태의 초기값을 나타낸다.
setState를 사용하는 방법은 두가지가 존재한다.
1. 값을 기반한 업데이트
- 이전 state를 사용하지않고 setState내부에서 업데이트할 값을 인자로 받는다.
- 이 방법은 아마 익숙할것이고, 또 많이 써왔을 일반적인 useState에서 state 상태값 변경 로직이다.
function Counter() {
const [count, setCount] = useState(0);
const handleIncrement = () => {
// 기본적인 setState 사용
setCount(count + 1); // 새로운 값을 설정
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrement}>Increment</button>
</div>
);
}
2. 콜백함수를 사용한 setState
- 해당 setState는 React 엔진 내부에서 어떤 조건처리로 인하여, 콜백함수를 인자로 전달받을 수 있다. 해당 콜백함수는 이전 상태값(prevState)를 인자로 받아 새로운 값을 반환할 수 있다.
- 해당 콜백함수를 사용한 setState는 이전 상태 값에 기반한 업데이트라고 부르며, 객체나 배열같은 복잡한 상태를 변경해야할 때 주로 쓰인다.
function ComplexStateExample() {
const [user, setUser] = useState({
name: 'Seju',
age: 26,
email: 'seju@gmail.com'
});
const handleUpdateAge = () => {
// 이전 상태 값을 기반으로 새로운 값을 계산하여 업데이트
setUser(prevUser => ({
...prevUser,
age: prevUser.age + 1
}));
};
return (
<div>
<p>Name: {user.name}</p>
<p>Age: {user.age}</p>
<p>Email: {user.email}</p>
<button onClick={handleUpdateAge}>Increase Age</button>
</div>
);
}
- 위 코드에선 user 상태가 객체로 관리되고 있으며, setUser에서 콜백함수를 이용해 이전 상태 값(prevUser)을 기반으로 새로운 객체를 생성하여 업데이트하고 있다.
- 여기서 setUser 내부의 콜백함수에 인자로 전달한 prevUser는 useState로 관리되는 user상태의 이전 값을 나타낸다.
- useState로 호출할때 초기값으로 지정한 값인 user가 초기값이 되고, 이후 setUser를 호출해 user의 상태가 업데이트되면, React에서는 user의 상태를 자동으로 관리하며, 그 이전 값을 prevUser로 제공하는 형태이다.
따라서 이전 상태에 기반해 값을 업데이트 하고 싶다면 setState 함수에 콜백함수를 써야한다.
'코드잇 스프린트 > Daily Quiz' 카테고리의 다른 글
[코드잇 스프린트] 0417 데일리 퀴즈 (0) | 2024.04.17 |
---|---|
[코드잇 스프린트] 0416 데일리 퀴즈 (0) | 2024.04.16 |
[코드잇 스프린트] 0412 데일리 퀴즈 (1) | 2024.04.12 |
[코드잇 스프린트] 0411 데일리 퀴즈 (0) | 2024.04.11 |
[코드잇 스프린트] 0403 데일리 퀴즈 (0) | 2024.04.03 |
- Total
- Today
- Yesterday
- 배열
- 제어 컴포넌트
- arguments
- 유사배열객체
- Target
- 취업까지달린다
- tanstackquery
- 스프린트프론트엔드6기
- 객체
- 중급 프로젝트
- 코드잇 스프린트
- Next.js
- 비동기
- currentTarget
- react
- GitHub
- html
- javascript
- 동기
- Git
- map
- 프론트엔드
- 비제어 컴포넌트
- rest parameter
- CSS
- 리액트
- js
- hydrationboundary
- 코드잇스프린트
- innerhtml
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |