에러가 떠요

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

Chapter6 질문 드립니다

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

실습 코드 있을까요?

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

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

안녕하세요, 소플입니다.우선 현재 겪고 계신 상황을 자세하게 설명해주셔서 감사합니다.AI가 답변해준 StrictMode는 처음 컴포넌트 마운트 시에만 해당되는 내용이기 때문에, 지금 질문해주신 내용과는 다르다는 점을 먼저 말씀드립니다. 상황을 정리해보면 count가 변경됨으로써 재렌더링이 발생하고,그 이후에 count를 의존성 배열에 갖고 있는 useEffect() 훅에서 아래와 같은 코드가 실행됩니다.setIsFull(count >= MAX_CAPACITY);이 때 isFull의 값이 변경되면 재렌더링이 발생하지만, 변경되지 않더라도 내부적으로 Virtual DOM Tree를 생성하기 위해 함수 컴포넌트가 호출되면서 React element를 새로 만드는 경우가 있습니다.그래서 그런 경우에 로그가 두 번 출력되는 것이라고 이해하시면 됩니다. 아래에 더 간단한 예시코드를 첨부해두었으니 한 번 테스트 해보시기 바랍니다.이 코드에서도 동일한 값의 버튼을 누를 경우 콘솔 로그가 출력되지 않을 것으로 기대되지만,일부 상황에서는 콘솔 로그가 출력되는 것을 확인할 수 있습니다.import { useState } from "react"; function MyComponent() { console.log("컴포넌트 렌더링!"); const [state, setState] = useState(false); return ( State: {state.toString()} setState(false)}>false로 설정 setState(true)}>true로 설정 ); } export default MyComponent; 하지만 콘솔 로그가 출력(React element가 생성)된다는 것이 매번 화면이 갱신된다는 의미는 아닙니다.리액트는 Virtual DOM을 사용하여 변경된 부분만을 계산하고 업데이트하는데, 이 때 상태 값이 변하지 않으면 리액트는 변경 사항이 없다고 판단하고 실제 DOM 업데이트를 건너뛰게 되기 때문입니다. 나중에는 콘솔 로그를 찍어서 확인하기 보다는 React Devtools의 Profiler 기능을 사용해서 더 정확하게 재렌더링이 몇 번 발생하는지 확인해보시면 좋습니다! 감사합니다.

npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다

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

이름과 코멘트 줄바꿈이 안 됩니다.

안녕하세요, 소플입니다. 혹시 Comment 컴포넌트 코드를 첨부해주실 수 있을까요? 감사합니다.

버튼이 안 뜹니다

안녕하세요, 소플입니다.index.html 파일의 14번째 줄에 오타가 있습니다.아래와 같이 수정해주시고,https://unpkg.com/react@17.0.0/umd/react.development.jsMyButton.js 파일에서도 ReactDoM이 아닌 ReactDOM으로 사용해주시기 바랍니다!

npx create-react-app my-app

안녕하세요, 소플입니다. 현재 리액트 19 정식 릴리즈로 인해 create-react-app이 제대로 작동하지 않습니다.우선 아래 명령어를 참고해서 Yarn 설치하고, Yarn을 사용해서 리액트 앱을 생성하고 실습을 진행해주세요!npm install -g yarn yarn create react-app my-app 감사합니다.

jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.

안녕하세요, 소플입니다. 혹시 작성하신 Library.jsx 파일 소스 코드를 첨부해주실 수 있을까요? 감사합니다.

Chapter_05 터미널, 리액트 에러

안녕하세요, 소플입니다.ReactDOM.render가 아닌 root.render를 사용하는 형태로 수정해보시기 바랍니다! 감사합니다.