soaple

안녕하세요, 소플입니다.&nbsp;<code>useState()</code> 훅의 set 함수를 사용할 때는 직접 값을 넣는 방법과, 함수를 넣는 방법이 있습니다.그리고 함수를 넣는 방법에서는 함수의 인자로 이전 값이 전달됩니다.더 자세한 내용은 아래 공식문서 링크를 참고하시기 바랍니다!<a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/Mnd9D">https://inf.run/Mnd9D</a>&nbsp;감사합니다.

prevIsConfiromed 질문

안녕하세요, 소플입니다.&nbsp;먼저 강의에서 보셨다시피 Context를 사용하는 이유는,어떤 컴포넌트가 컴포넌트 트리 상에 어디에 위치해있든지 관계없이 특정 데이터에 접근할 수 있게 하기 위함입니다.이것은 우리가 흔히 Prop Drilling이라고 부르는 문제를 해결하기 위한 방법 중에 하나이기도 합니다.<code>props</code>를 통해서 데이터를 전달하는 것 자체는 문제가 아니지만, 그 깊이(depth)가 깊어지면 컴포넌트 코드가 지저분해지고 관리하기 쉽지 않게 됩니다.그래서 일반적으로는 Redux 같은 전역 상태 관리 라이브러리를 사용하거나, 간단하게는 Context API를 사용하게 됩니다.하지만 Context API를 사용한다고 해서 무조건 모든 컴포넌트가 해당 데이터에 접근할 수 있는 것은 아닙니다.누군가는 데이터를 제공(Provide)해줘야 하고, 그래야만 누군가가 그 데이터를 소비(Consume) 할 수 있습니다.여기서 데이터를 제공하는 역할을 하는 것이 바로 Context의 <code>Provider</code>컴포넌트이고, 소비하는 것이 <code>Provider</code>컴포넌트의 하위에 있는 <code>Consumer</code> 컴포넌트 입니다.클래스 컴포넌트를 주로 사용하던 과거에는 아래 링크에 있는 것과 같이 <code>Consumer</code> 컴포넌트를 별도로 사용했는데, 함수 컴포넌트를 사용하는 지금은 <code>useContext()</code> 훅을 사용해서 <code>Provider</code> 컴포넌트가 제공하는 값에 접근할 수 있습니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/ujSMj">https://inf.run/ujSMj</a>&nbsp;정리해보면, <code>Provider</code> 컴포넌트는 자신의 하위 컴포넌트에 <code>value</code>라는 <code>prop</code>으로 전달받은 데이터를 찔러주는 역할을 한다라고 할 수 있을 것 같습니다.&nbsp;이해가 안 되는 부분은 추가로 질문 남겨주시기 바랍니다~!감사합니다.

chapter14 잘이해가 되지않습니다..

안녕하세요, 소플입니다.이 강의에서는 리액트 기초 개념을 주로 다루기 때문에 지금 수강하셔도 전혀 문제가 없습니다!감사합니다.

2025년 3월 리액트버전

안녕하세요, 소플입니다.&nbsp;10번째에 추가로 로그가 찍히는 이유는 <code>setIsFull(count >= MAX_CAPACITY);</code>을 통해 <code>isFull</code>의 값이 <code>true</code>로 변경되면서 다시 한 번 위쪽에 있는 <code>useEffect()</code> 훅의 effect 함수가 실행되기 때문입니다.9번째 까지는 <code>isFull</code>의 값이 계속 <code>false</code>로 동일하기 때문에 호출되지 않은 것이구요~<pre><code>import React, { useState, useEffect } from "react";
import useCounter from "./useCounter";

const MAX_CAPACITY = 10;

function Accommodate(props) {
 const [isFull, setIsFull] = useState(false);
 const [count, increaseCount, decreaseCount] = useCounter(0);

 useEffect(() => {
 console.log("======================");
 console.log("useEffect() is called.");
 console.log(`isFull: ${isFull}`);
 });

 useEffect(() => {
 setIsFull(count >= MAX_CAPACITY);
 console.log(`Current count value: ${count}`);
 }, [count]);

 return (
 <div style={{ padding: 16 }}>
 {`총 ${count}명 수용했습니다.`}

 <button onClick={increaseCount} disabled={isFull}>
 입장
 </button>
 <button onClick={decreaseCount}>퇴장</button>

 {isFull && 정원이 가득찼습니다.}
 </div>
 );
}

export default Accommodate;</code></pre>&nbsp;감사합니다.

chapter_07 콘솔로그 질문드려요~!

안녕하세요, 소플입니다.&nbsp;혹시 작성하신 코드 중에서 '글 작성하기' 버튼이 있는 코드를 올려주실 수 있을까요?코드를 봐야 원인 파악이 가능할 것 같습니다~!&nbsp;감사합니다.

안녕하세요 미니블로그 실습 질문드립니다.

안녕하세요, 소플입니다.&nbsp;올려주신 로그만으로는 정확한 원인 파악이 힘든데, 현재 포트 번호가 <code>3001</code>로 되어 있네요~애플리케이션을 여러 번 실행시키신 것 같은데, 프로세스를 모두 종료하거나 PC 재부팅 이후에 다시 실행하고 <code>3000</code>번 포트로 접속해보시기 바랍니다!&nbsp;감사합니다.

에러가 떠요

안녕하세요, 소플입니다.&nbsp;해당 메시지는 리스트에 key가 없어서 나오는 메시지입니다.리액트에서는 렌더링 최적화를 위해서 리스트의 각 요소에 key 속성을 넣어주어야 하는데,key 속성이 없을 경우 지금 겪고 계신 것과 같은 메시지가 출력됩니다.이후에 나오는 섹션 11. List and Keys에서 관련 내용을 설명하고 있으니 참고하시기 바랍니다!&nbsp;감사합니다.

Chapter6 질문 드립니다

안녕하세요, 소플입니다.&nbsp;아래 주소에서 소스코드를 확인하실 수 있습니다.<ul><li>실습: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/soaple/first-met-react-practice-v18">https://github.com/soaple/first-met-react-practice-v18</a></li><li>미니 프로젝트: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/soaple/mini-blog">https://github.com/soaple/mini-blog</a></li></ul>&nbsp;혹시 잘 해결되지 않는 부분이 있다면 언제든지 질문 남겨주세요!감사합니다.

실습 코드 있을까요?

안녕하세요, 소플입니다.우선 현재 겪고 계신 상황을 자세하게 설명해주셔서 감사합니다.AI가 답변해준 <code>StrictMode</code>는 처음 컴포넌트 마운트 시에만 해당되는 내용이기 때문에, 지금 질문해주신 내용과는 다르다는 점을 먼저 말씀드립니다.&nbsp;상황을 정리해보면 <code>count</code>가 변경됨으로써 재렌더링이 발생하고,그 이후에 <code>count</code>를 의존성 배열에 갖고 있는 <code>useEffect()</code> 훅에서 아래와 같은 코드가 실행됩니다.<pre><code>setIsFull(count >= MAX_CAPACITY);</code></pre>이 때 <code>isFull</code>의 값이 변경되면 재렌더링이 발생하지만, 변경되지 않더라도 내부적으로 Virtual DOM Tree를 생성하기 위해 함수 컴포넌트가 호출되면서 React element를 새로 만드는 경우가 있습니다.그래서 그런 경우에 로그가 두 번 출력되는 것이라고 이해하시면 됩니다.&nbsp;아래에 더 간단한 예시코드를 첨부해두었으니 한 번 테스트 해보시기 바랍니다.이 코드에서도 동일한 값의 버튼을 누를 경우 콘솔 로그가 출력되지 않을 것으로 기대되지만,일부 상황에서는 콘솔 로그가 출력되는 것을 확인할 수 있습니다.<pre><code>import { useState } from "react";

function MyComponent() {
 console.log("컴포넌트 렌더링!");

 const [state, setState] = useState(false);

 return (
 <div>
 State: {state.toString()}
 <button onClick={() => setState(false)}>false로 설정</button>
 <button onClick={() => setState(true)}>true로 설정</button>
 </div>
 );
}

export default MyComponent;</code></pre>&nbsp;하지만 콘솔 로그가 출력(React element가 생성)된다는 것이 매번 화면이 갱신된다는 의미는 아닙니다.리액트는 Virtual DOM을 사용하여 변경된 부분만을 계산하고 업데이트하는데, 이 때 상태 값이 변하지 않으면 리액트는 변경 사항이 없다고 판단하고 실제 DOM 업데이트를 건너뛰게 되기 때문입니다.&nbsp;나중에는 콘솔 로그를 찍어서 확인하기 보다는 React Devtools의 Profiler 기능을 사용해서 더 정확하게 재렌더링이 몇 번 발생하는지 확인해보시면 좋습니다!&nbsp;감사합니다.

상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.

안녕하세요, 소플입니다.&nbsp;권한이 없어서 발생하는 문제 같은데, 위 답변을 참고해서 한 번 진행해보시겠어요?&nbsp;감사합니다.

soaple

Bài viết