25%
36,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
memo CounterA 버튼에서 React.memo를 안사용해도 리렌더링이 안됩니다.
제가 최적화 2 -React.memo를 듣고 있는데잘못된 강의 코드인지 잘 모르겠지만 직접 따라 치면서이해하려고 따로 테스트도 진행해보았는데요. 이부분에서 React.memo를 선언하지 않고A button클릭해도콘솔을 넣어도 리렌더링이 안되었습니다. 아래는 제가 친 코드인데요.프롭스를 count+1 해서 주었을 때 잘 작동되는 건 확인이 되었습니다.하지만 위 코드처럼 count만 하면 리렌더링은 일어나지않습니다.강의 내용 이해에 큰 문제되는 부분은 아니지만 그래도 버튼을 클릭해서 값이 변하지 않은 count를 주었을 때리렌더링이 되어야 된다고 생각하는데 안되니까 의문이 생겨서질문합니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[map, key prop]백엔드로부터 데이터를 받아올 시, id 처리
const DiaryList = ({ diaryData }) => { console.log(diaryData); return ( <div className="DiaryList"> <h1>일기 리스트</h1> <h4>{diaryData.length}개의 리스트가 있습니다.</h4> <div> {diaryData.map((diary) => ( <div key={diary.id}> <div>작성자 : {diary.author}</div> <div>일기 : {diary.content}</div> <div>감정 : {diary.emotion}</div> <div>날짜 : {diary.created_date}</div> </div> ))} </div> </div> ); };'리액트에서 배열 사용하기1- 리스트 렌더링' 강의 듣다가 궁금증이 생겨 질문 드립니다!만약, 백엔드로부터 사용자가 작성한 다이어리 데이터를 통신을 통해 불러온다고 했을 때,혹시 백엔드 데이터 구조 상에서 각 다이어리 아이템마다 id를 두지 않는 경우가 있을까요?만약, 백엔드 측에서 각 다이어리 아이템마다 id를 설정해두지 않았다면 프론트엔드 측에서 백엔드에게 id 데이터를 다이어리 데이터와 함께 넘겨달라고 요청드릴 부분일까요? 아니면 프론트 단에서 key에 고유의 아이디를 넘겨주기 위해 uuid 등의 라이브러리를 사용해서 알아서 Id를 처리해야 할 부분일까요???
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
질문드립니다 .
switch (action.type) { case "INIT": { return action.data; } case "CREATE": { const newItem = { ...action.data, }; newState = [newItem, ...state]; break; } case "DELETE": { newState = state.filter((it) => it.id != action.targetId); break; } case "EDIT": { newState = state.map((id) => it.id === action.data.id ? { ...action.data } : it ); break; } default: return state; } return newState;여기에 보면 ...으로 객체 깊은 복사? 하는거 같은데 만약에 CREATE 쪽 const newItem = { ...action.data, }; newState = [newItem, ...state]; 대신 const newItem = { action.data, }; newState = [newItem, state]; 으로 썼을떄 차이점Edit쪽 newState = state.map((id) => it.id === action.data.id ? { ...action.data } : it 대신 newState = state.map((id) => it.id === action.data.id ? { action.data } : it 으로 썼을떄 차이점 INIT 쪽 return action.data; 왜 이건 action.data를 바로 newState에 저장안시키고 리턴하는지 궁금합니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useCallback 의 Memoization 값 저장 방식은 참조가 아닌가요?
const onCreate = useCallback((author, content, emotion) => { const created_date = new Date().getTime(); const newItem = { author, content, emotion, created_date, id: dataId.current, }; dataId.current += 1; setData([newItem, ...data]); // initial state인 data = [] 로 인한 문제 }, []); 강의 중에서 useCallback 에서 data 값 갱신 문제에 질문이 있습니다. 우선, data 가 일반적인 값 참조처럼 일어나지 않는다는 점을 이해했습니다. 가장 마지막에 onCreate 가 업데이트되는 시점의 data 값을 기억해 두고 사용한다는 점도 이해했습니다. 그런데 왜 이렇게 동작하는지 궁금합니다. 구체적으로 말하면 Memoization이 어떻게 구현됐기에 이런 문제가 발생하는 건가요? 이전 값을 그대로 가지고 있으려면 단순히 참조 주소를 복사하는 식으로는 안 되고 Deep Copy가 일어나야 하지 않나요? 그리고 Deep Copy를 통해 Memo를 구현했다기에는 석연치 않은 부분들도 있습니다. 우선 매번 Deep Copy를 수행하는 식으로 Memo를 구현했다면 성능 문제가 발생하지 않을까요? 게다가 depth에서는 Shallow Compare 가 일어나니까 Deep Copy를 통해 구현하지는 않았을 것 같습니다. 이전 상태를 기억해 둔다는 방식은 이전 상태에 state 변수들을 내부에 따로 복사해서 저장해 둔다는 개념으로 이해되는데, 제가 예상하는 대로 Deep Copy를 통해 이전 값을 저장해 두는 건지 아니면 제가 놓친 부분이 있는지 궁금합니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드에서 궁금한게 있습니다.
<>{content}</> 로 쓰면 에러가 안나고{content} 로쓰면 에러가 나는 이유가 뭘까요 ??? 작성자 : {id} | 감정 : {emotion}<div className="content"> {isEdit ? ( <textarea value={localContent} onChange={(e) => setLocalContent(e.target.value)} /> ) : ( <>{content}</> )} </div>여기서 강의 보면 id,emotion는 <></>을 안쓰는데 content를 쓰는 이유가 뭔지 모르겠습니다. 어차피 const DiaryItem = ({ onEdit, onDelete, author, content, emotion, create_date, id, }) => {전부 List로 부터 받아오는데 누군 <>{content}</>이고 누군 그냥 {id} {emotion}인 이유가 먼지 궁금해요그리고 data.filter((it)=>(it.id!==targetId)); 을 data.filter((it)=>{it.id!==targetId}); 로 바꾸면 왜 에러가 나는걸까요 ?? ?언제 괄호를 쓰고 언제 중괄호를 써야하는지 정확히 알수있을까요 ??? 아래는 전체 코드입니다.import { useRef, useState } from "react"; const DiaryItem = ({ onEdit, onDelete, author, content, emotion, create_date, id, }) => { const [isEdit, setIsEdit] = useState(false); const toggleIsEdit = () => setIsEdit(!isEdit); const [localContent, setLocalContent] = useState(content); const handleDelete = () => { console.log(id); if (window.confirm(`${id}번쨰 일기를 삭제하겠습니까?`)) { onDelete(id); } }; const handleQuiteEdit = () => { setIsEdit(false); setLocalContent(content); }; const handleEdit = () => { onEdit(id, localContent); }; return ( <div className="DiaryItem"> <div className="info"> <span className="author_info"> 작성자 : <>{id}</> | 감정 : <>{emotion}</> </span> <br /> <span className="date">날짜: {create_date}</span> </div> <div className="content"> {isEdit ? ( <textarea value={localContent} onChange={(e) => setLocalContent(e.target.value)} /> ) : ( <>{content}</> )} </div> {isEdit ? ( <> <button onClick={handleQuiteEdit}>수정취소</button> <button onClick={handleEdit}>수정완료</button> </> ) : ( <> <button onClick={handleDelete}>삭제하기</button> <button onClick={toggleIsEdit}>수정하기</button> </> )} </div> ); }; export default DiaryItem;
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드 질문있습니다.
<DiaryItem key={it.id} {...it} />스프레드 연산자는 이해가 가는데 key={it.id} 옆에 바로 붙혀서 state객체를 넣을수 있는건가요 ?? 이건 어떤 문법일까요 <DiaryItem key={it.id} {...it} /><DiaryItem key={it.id} diary={it} />...을 써서 넣는거랑 안쓰고 앞에 diary = {it}으로 명시하고 넣는거랑 어떤차이가 있을까요 ? 전 이렇게 바꿨는데 ..이해가 안되서import DiaryItem from "./DiaryItem"; const DiaryList = ({diaryList})=> { console.log(diaryList); return ( <div className="DiaryList"> <h2>일기리스트</h2> <h4>{diaryList.length}개의 일기가 있습니다</h4> <div> {diaryList.map((it) => ( <DiaryItem key={it.id} diary={it} /> ))} </div> </div> ); }; DiaryList.defaultProps = { diaryList : [], } export default DiaryList;
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수정후 저장할때 자동으로 붙는 세미콜론 등은 어떤 플로그인에 의해 작동되는지?
수정후 저장할때 자동으로 붙는 세미콜론 등은 어떤 플로그인에 의해 작동되는지요? 프리티어라면 프리티어 설정 어디에서 무엇을 ON 시켜야 되나요?저는 안되서..^^
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
dummyList 변수 선언 위치 질문
안녕하세요 dummyList라는 변수 선언이 App함수 밖에 선언이 되어있는데App함수 안에 선언을 하는거랑 결과상으로는 같더라구요 jsx문법에서 보통 이런 변수선언은 함수 안에 하나요 밖에 하나요?혹시 차이가 있을까요? 이런 변수선언을 함수 밖에 선언하는 경우와 안에 선언하는 경우의 차이가 궁금합니다
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
serve -s build가 오류납니다ㅠㅠ
build 파일도 완성됐고 다른 것들도 다 오류없이 되었는데 serve -s build가 안됩니다..이렇게 오류가 뜹니다.. 커뮤니티에서 찾아봤는데 관리자 권한으로 실행하면 될 거라고 하셔서 해봤는데 안되고..get-executionpolicy를 입력하고set-executionpolicy -executionpolicy remotesigned입력하라고 하셔서 해봣는데 오류가 또 납니다..https://github.com/veryyounng/emotion_diary.git
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
local Storage을 이용하여 삭제하기 도중 오류납니다
강의를 들으면서 분명 삭제하기까지 정상 작동되는것을 보았는데 그 이후 diaryList에서 id값을 정렬할때 오류가 발생합니다 ㅠㅠapp.js에서 88번째 줄의 data가 정의되지 않았다고 뜹니다 ..아래는 코드 샌드박스 링크입니다.https://codesandbox.io/s/late-morning-d483sv?file=/src
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
DiaryItem에 있는 onRemove, onEdit, 는 바뀔 수밖에 없지 않나요?
20번째 다이어리를 삭제하는 경우 data 가 바뀌기에onRemove 함수가 재랜더링이 되기에 => DiaryItem 컴포넌트 내부에 있는 props 가 변경되는 원리로 이해가 되어요 ㅜㅜ onEdit 도 마친가지구요. onCreate 함수는 에디터와만 상관이 있어서 다이어리아이템과 상관이 없다는게 이해 갑니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 작성이 됐었는데 다시 안됩니다...
두 번 질문해서 답변대로 수정하였더니 일기가 작성이 되었다가..수정 기능을 강의를 보면서 구현을 하였고갑자기 또 일기 작성이 되지 않습니다..다시 여러 번 강의를 보면서 따라했으나 해결하지 못하였습니다..죄송합니다ㅠㅠ코드 샌드박스 링크입니다https://codesandbox.io/s/late-morning-d483sv?file=/src
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
sandbox에서 .js로 새 파일 작업시 즉시 반영 안됨
sandbox에서 default 파일(.mjs) 말고 .js 파일을 새로 만들어서 console.log를 실행했는데 .mjs 처럼 즉시 실행이 안됩니다. (이떄 instant preview도 on 했습니다.)
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기작성이 안돼요 ㅠㅠ
어제 질문 남겼는데 답변해주신대로 해봤는데 아직도 작성완료가 안됩니다... ㅠㅠ강의 돌려보면서 틀린거 없나 살폈는데도 모르겠어요.. 콘솔에도 아무것도 안찍히구요..무슨 일일까요? ㅠㅠ샌드박스 링크 남깁니다..https://codesandbox.io/s/late-morning-d483sv?file=/src
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
serve -s build 오류가 납니다.ㅠㅠㅠ
File sizes after gzip: 56.23 kB build\static\js\main.c2dd5a76.js 1.22 kB build\static\css\main.9a059f26.css The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: https://cra.link/deployment C:\Users\min seo hyun\Desktop\emotion-diary>npm install -g serve changed 89 packages in 5s 24 packages are looking for funding run npm fund for details C:\Users\min seo hyun\Desktop\emotion-diary>serve -s build 'serve'은(는) 내부 또는 외부 명령, File sizes after gzip: 56.23 kB build\static\js\main.c2dd5a76.js 1.22 kB build\static\css\main.9a059f26.css The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: https://cra.link/deployment C:\Users\min seo hyun\Desktop\emotion-diary>npm install -g serve changed 89 packages in 5s 24 packages are looking for funding run `npm fund` for details C:\Users\min seo hyun\Desktop\emotion-diary>serve -s build 'serve'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.cmd창에서 빌드 파일 생성하고 serve도install 하였습니다.그 다음 과정인 serve -s builde진행하는 과정에서 위와같은 오류가 나오는데 왜 그런지 도와주세요ㅠㅠㅠ
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 작성이 안돼요
작성완료를 누르면 새로 추가가 되지 않습니다.뭐가 문제일까요?코드 샌드박스 주소는 여기 있습니다.https://codesandbox.io/s/late-morning-d483sv
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새로고침 시 렌더링이 계속 2번 발생합니다
안녕하세요 6-12까지 수강한 상태입니다. 강의를 따라해서 다른 부분은 다 강의대로 똑같이 진행되는데 저는 사이트를 새로고침시 여전히 렌더링이 2번 진행됩니다. 전에 컴포넌트 id를 확인했을 때 0부터가 아닌 20부터 id가 시작되는 걸 확인했어서 그것과도 연관이 있는 것 같은데 정확한 원인을 도무지 못 찾겠어서 질문드립니다ㅠㅠ아래는 코드샌드박스 링크입니다. 감사합니다!https://codesandbox.io/s/ecstatic-firefly-87mcs4?file=/src/App.js
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 쓰기 부분 26분 경 onClick
import React from 'react'; const EmotionItem = ({ emotion_id, emotion_img, emotion_descript, onClick, }) => { return ( <div onClick={() => onClick(emotion_id)} className="EmotionItem"> <img src={emotion_img} alt="감정 이미지" /> <span>{emotion_descript}</span> </div> ); }; export default EmotionItem; DiaryEditor에서 EmotionItem 부분에 onClick 프롭스를 전달해주고 있는데요. div 부분에 onClick을 받는 건 알겠는데 중괄호 안에 또 onClick을 받는 건 왜인가요? 코드 문법이 잘 이해가 되지 않아 질문 드립니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
조건문 업그레이드 질문
조건문 업그레이드에서 6분 가량 10번째 줄에meal[mealType] || "굶기" 가 있습니다.여기에서 console.log(getMeal("한식"))의 결과가 "불고기"가 나오는것은 이해가 갑니다.만약 meal.mealType으로 코드를 수정했을 때도 "불고기"가 나와야할 것 같은데 "굶기"가 나옵니다.잘 이해가 가지 않아서 설명 가능하시다면 부탁드립니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React Error..
(사진)