48,400원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
setData(() => [newItem, ...data])에 관한 질문입니다.
함수형 업데이트? 에서 setData(() => [newItem, ...data])를 하면변수 data 값이 setData()안에 들어있는 콜백함수가 들어가는 것인가요? 아니면 콜백함수가 실행된 값이 들어가는 것인가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
두번째 프로젝트 오류 질문드립니다
페이지구현 - 홈(/) 강의 53:08쯤에 slice(0, 25)를 붙이면 이렇게 오류나고, props가 udifined로 넘어오는게 문제인것같긴한데 왜 이렇게 오류가 났는지 전혀 모르겠어서 해결을 못하고있습니다ㅠㅠ 이럴때는 어떻게 해야할까요?이번에는 샌드박스 프로텍트 푼다고 풀어봤는데 잘 된건지 잘 모르겠네요
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
두번째 프로젝트 페이지구현- 홈(/)강의 질문
사진이 엑스박스로 뜨는데 어디가 잘못된건지 모르겠습니다
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
state 을 사용할수 있는 곳?
state의 특징들에 관해서 잘 알겠습니다. 하지만 실제로 해당 기능을 쓸 수 있는 곳이 어디 있을까요? 저가 생각나는 것은 일단 쇼핑웹사이트에서 구매자가 자기가 살려고 하는 물건의 개수를 표시하는게 떠오르기는 하는데 이것 말고도 있을까요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
날짜 정렬 기능이 안됌
최신순 정렬이 되지 않아서 질문 드립니다. https://github.com/youngwoobae/EMOTION-DIARY 무슨 문제 일까요..?
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
html 에서 컴포넌트 사용여부
이 강의에서 리액트가 쓰이는 이유가 html 에서 똑같이 반복되는 header 부분이나 footer 분들을 각 html 로 계속 똑같이 작성을 해서 나중에 수정을 해야 될 경우 샷건 수술을 안하고 컴포넌트 방식으로 작성을 해서 그 부분을 수정하면 모든 그 컴포넌트 방식을 사용하는 부분이 다 한번에 고쳐진다는 장점이 있다는걸 이해했습니다. 혹시 html 만 사용을 했을 경우 이런 컴포넌트 방식을 아에 구현이 불가능한건지 궁금합니다.
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
섹션5 데이터 추가하기 강의에 질문있습니다.
섹션 5 useRef , 데이터 추가하기강의에서 useRef가 dom을 지정하기 위해 사용한다고 이해했거든요?근데 데이터를 전달을 위해const dataID = useRdf(0)하고dataId.current += 1처럼변수같이 사용하는데그냥 변수처럼도 사용한거는건가요? 아니면 저가 이해를 못한 사용 의미가 있는건가요제 생각엔 그냥 변수 하나 0으로 초기화하고 그걸 써도 되지 않나란 생각이 들어서요
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
6-15 const store에 대해
안녕하세요영상을 따라 코드를 쭉 따라가는데요.따라치면은, 결국은 onCreate, onEdit, onRemove가 안되는데, 올려주신 최종소스에는 const store = { data, };이부분과<DiaryStateContext.Provider value={store}>이부분이 있는데,영상에는 빠져있어서 연결부분을 모르겠습니다. 영상과 최종 소스와의 차이점을 좀 알려주세요~
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
6-15에서 일기 생성이 안되는 것 같은데요.
안녕하세요올려주신 샘플에서도, 제가 직접 친 코드에서도일기 생성이 안되는 것 같은데요.알려주세요~ https://codesandbox.io/s/chapt-15-rlyyu?file=/src/App.css 자답:const handleAddButtonClick = () => {alert("일기가 추가되었어요!");return;이렇게 되어 있었네요. return을 없애니 추가 됩니다.
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
context, 최적화 관련 질문
안녕하세요. 강사님완강하고 코드 복습하다가 context 관련해서 헷갈리는 점이 생겨서 질문드립니다.!이전에 간단한 일기장 만들기에서는 state를 핸들링하는 함수들(onCreate, onRemove, onEdit)을 전달하는 DispatchContext에 value Props으로 이 함수들을 넘겨줄 때, useMemo를 사용해서 함수들을 감싼 메모이제이션된 객체를 넘겨줘서state가 바껴서 App 컴포넌트가 재랜더링되어도 최적화가 풀리지 않도록 했던 걸로 기억합니다.이번 감정 일기장에서는 DispatchContext의 value Props로 함수들을 넘겨주실 때 함수를 담은 객체를 메모이져이션하지 않고 넘겨주셨습니다. 1) 이 경우, App에서 data state가 바뀌면 결국 onCreate, onRemove, onEdit 함수가 재생성되고 DispatchContext의 value로 넘겨주는 객체도 재생성되어 Context컴포넌트의 하위 컴포넌트(최적화 안한)도 재랜더링되는게 맞나요?2) 감정일기장에서 이 부분은 최적화 안한 것은 이번에는 그냥 간단하게 진행하시려고 해서 그런건가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새일기 작성, 수정 시 두번의 렌더링으로 두개가 생깁니다.
새일기를 작성하거나, 수정하게되면 두개씩 렌더링이 이루어 집니다.https://github.com/Byeong-Gwan/React/tree/main/Emotion-Diary
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
혹시 2번째 프로젝트도 코드좀 제공해주실수 있나요?
요번에 프로젝트 2를 시작했는데 뭐가 문제인지 모르겠는데 계속 오류가 뜨면서 문제가 발생하네요 분명히 아침에 작성했을때는 오류가 없이 잘 작동되었는데 말이죠... 혹시 프로젝트 1 처럼 관련 코들를 codesandbox에 제공이 가능할까요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
저는 자꾸 메소드가 두번씩 실행되는데 원인을 모르겠습니다
import { useState, useEffect, useRef, useMemo } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; import OptimizeTest from "./OptimizeTest"; const App = () => { const [data, setData] = useState([]); const dataId = useRef(0); const getData = async () => { const res = await fetch( "https://jsonplaceholder.typicode.com/comments" ).then((res) => res.json()); const initData = res.slice(0, 10).map((it) => { return { author: it.email, content: it.body, emotion: Math.floor(Math.random() * 5) + 1, created_date: new Date().getTime(), id: dataId.current++, }; }); setData(initData); console.log(initData); }; useEffect(() => { getData(); }, []); const onCreate = (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]); }; const onRemove = (targetId) => { const newDiaryList = data.filter((it) => it.id !== targetId); console.log(newDiaryList); setData(newDiaryList); }; const onChange = (targetId, newContent) => { for (let i in data) { if (data[i].id === targetId) { data[i].content = newContent; } } setData([...data]); }; const getAnalysis = useMemo(() => { console.log("일기 분석 시작 "); const goodCount = data.filter((it) => it.emotion >= 3).length; const badCount = data.length - goodCount; const goodRatio = (goodCount / data.length) * 100; return { goodCount, badCount, goodRatio }; }, [data.length]); const { goodCount, badCount, goodRatio } = getAnalysis; return ( <div className="App"> <OptimizeTest /> <DiaryEditor onCreate={onCreate} /> <div>전체 일기 : {data.length}</div> <div>좋은 감정 점수 개수: {goodCount}</div> <div>나쁜 감정 점수 개수: {badCount}</div> <div>좋은 감정 점수 비율: {goodRatio}%</div> <DiaryList onRemove={onRemove} onChange={onChange} diaryList={data} /> </div> ); }; export default App;
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
간단히 추가하고 싶은데 막혀서요...
위 내용은 select Box에 "선택" 이라는 걸 하나 추가 하고 싶은데 처음은 되지만 두번째가 되면 에러가 납니다. 분기 처리를 해야될 거 같은데 제가 너무 초보라 아무리 생각해도 모르겠네요 ㅠㅠ 알려주시면 감사하겠습니다
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Unmount 시점 질문
강의 중 20분 57초 Unmount 관련 질문입니다.const [isVisible, setIsVisible] = useState(false);보면 isVisible의 기본값이 false입니다. 이 값이 true로 변경되었다가(update), 다시 반드시 제 값 'false'로 돌아오는 시점이 Unmount 시점인건가요?
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
웹페이지 F5 하면 일기 내용이 다 사라지는데
페이지 F5 리프레쉬 하면 일기 내용이 다 사라지는데 이럴땐 파일 저장이라던가 다른 방법을 사용해야 하는걸까요?어떤 방법들이 있을까요
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
기초공사 1에서 버튼 컴프의 클래스네임
MyButton이라는 새로운 CSS를 만들어서 버튼에만 적용하고 싶은데, 검사에서 클래스 네임이 다른 3개는 나오는데 UI상에서는 .MyButton은 효과가 적용되는데 포시티브, 네거티브, 디폴트에는 적용이 안되요! ㅠㅠApp.css에서도 동일하게 적용이 안되네요,오타도 없고, 검사에서 나온 값 그대로 복붙했는데..왜이러춍? 임포트를 해도, 가장위에있는 .MyButton만 효과가 적용된 상태(폰트 패밀리 등)
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
공부 방법에 대한 질문
공부 방법에 대해서 질문드려도될까요?자바스크립트와 리엑트 문법에 대해서는 조금이나마 알고 있다고 생각하는데, 막상 코드 앞에 서면 학습된 내용으로 코드를 짜고 작게나마 응용하는 수준이고 마음먹은 대로 잘안될때도 빈번합니다.강의에서 사용된 코드들은 외우다시피 작성하여 마치 내가 다 코드를짠것처럼 느껴지는 부분도 없지 않아 있구요..응용력이나 사고력이 많이 부족한것 같습니다.코딩 테스트 관련된 문제는 아직 한번도 보지못했습니다.추천 공부방법이나 조언 등 대답해주시면 감사하겠습니다 추가적으로, api호출시 fetch를 이용하여 map을 통해 값을 수정하여 일기리스트에 추가했는데 이것을 axios를 이용하여 요청시 , map에 사용될 배열값이 잡히지 않아서 문제가 있어요,,혹시 다른 방법이 있다면 알려주세요 :)
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
챕터 6의 코드 샌드박스 url 오류?
6-3 6-4 6-5 6-7 6-13 강의 하단의 url들이 제대로 동작하지 않는것 같습니다.
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새 일기 작성 시 새 일기가 작성되지 않음
새 일기 작성이 되지 않아서 강의 따라서 해보고다른분들이 같은 문제로 올린 곳에서 문제해결 하신분들 코드를 가져와서 해봤는데 안되서 올립니다.https://github.com/lhs0698/emotion_Diary