48,400원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
마지막날을 가져올 때 getMonth에 +1을 하는 이유
23번째 줄에서 해당 월의 마지막날을 가져올 때 getMonth에 +1을 하는 이유가 무엇인가요? getMonth에 +1을 하면 이미 그 다음 월로 넘어가는 것 아닌가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
App.css에서 display:flex를 두 번 적용하는 이유
header에서 이미 display:flex를 적용했는데 header > div에서까지 display:flex를 하는 이유가 무엇인가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onClick
해당 부분 22번째 줄에서 onClick에서 navigate함수를 호출할 때 arrow function이 아니라 그냥 navigate("/home") 함수를 호출하였더니 QS 바꾸기 버튼을 눌렀을 때 페이지가 그냥 뒤로 갔습니다. 왜 그런 것인가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
콜백함수
16번째 줄에서 setSearchParams를 중괄호로 감싸지 않는 이유가 혹시 실행하려는 statement가 하나라서 그런 건가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
inline css
혹시 4번째 줄에서 inline css style을 적용할 때 {} 중괄호로 한번 더 감싸는 이유가 무엇인가요?
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
DiaryItem
import { useState, useRef } from "react"; const DiaryItem = ({ author, emotion, created_time, content, id, onDelete, onEdit, }) => { const [isEdit, setIsEdit] = useState(false); const [localContent, setLocalContent] = useState(content); // 본문 수정 시 수정 전 콘텐츠 띄우기 const localContentInput = useRef(); const toggleIsEdit = () => { setIsEdit(!isEdit); }; const handleDelete = () => { if (window.confirm(`${id}번째 일기를 삭제하시겠습니까?`)) { onDelete(id); } }; const handleQuitEdit = () => { setIsEdit(false); setLocalContent(content); }; const handleEdit = () => { if (localContent.length < 5) { localContentInput.current.focus(); return; } onEdit(id, localContent); }; return ( <div className="DiaryItem"> <div className="info"> <span> 작성자 : {author} | 감정점수 : {emotion} </span> <br /> <span className="date">{new Date(created_time).toLocaleString()}</span> </div> <div className="content"> {/* 수정 중 콘텐츠 vs 수정 전 콘텐츠 */} {isEdit ? ( <textArea ref={localContentInput} value={localContent} onChange={(e) => setLocalContent(e.target.value)} /> ) : ( <>{content}</> )} </div> {/* 수정 중 버튼 vs 수정 전 버튼 */} {isEdit ? ( <> <button onClick={handleQuitEdit}>수정 취소</button> <button onClick={handleEdit}>수정 완료</button> </> ) : ( <> <button onClick={handleDelete}>삭제하기</button> <button onClick={toggleIsEdit}>수정하기</button> </> )} </div> ); }; export default DiaryItem;위는 제가 수업을 보며 따라친 DiaryItem.js인데 실행을 시키면 수정하기 버튼을 눌렀을 때 원래 콘텐츠가 textArea에 뜨지 않고 수정이 되지 않습니다. 하지만 소스코드에 올려진 DiaryItem.js를 복붙했을 때는 또 됩니다. 몇 번이나 두 파일을 비교했지만 잘못된 점을 찾아낼 수가 없었는데 도와주세요 ㅠㅠ
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
삼항연산자
34번째 줄에서 {content}를 빈 태그로 감싸는 이유가 뭔가요? 어차피 content는 문자열 아닌가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
defaultProps
Counter.js의 defaultProps를 설정했는데도 count 값이 0으로 설정되지 않아 질문드립니다.각각 App.js랑 Counter.js 입니다.// import logo from './logo.svg'; // import "./App.css"; // inline 스타일 적용 시 필요 없음 import MyHeader from "./MyHeader"; import MyFooter from "./MyFooter"; import Counter from "./Counter"; function App() { let name = "김학준"; const style = { App: { backgroundColor: "black", // Camel case }, h2: { color: "red", }, bold_text: { color: "green", }, }; const counterProps = { a: 1, b: 2, }; return ( // <div className="App"> // <div style={style.App}> <div> <MyHeader /> <Counter {...counterProps} /> {/* <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> */} {/* <h2>안녕 리액트 {name}</h2> */} {/* <h2 style={style.h2}>안녕 리액트 {name}</h2> */} {/* <b id="bold_text">React.js</b> */} {/* <b style={style.bold_text}>React.js</b> */} {/* <MyFooter /> */} </div> ); } export default App; import React, { useState } from "react"; // React의 메소드 const Counter = ({ initialValue }) => { // console.log("counter 호출!"); console.log(initialValue); const [count, setCount] = useState(initialValue); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; return ( <div> <h2>{count}</h2> <button onClick={onIncrease}>+</button> <button onClick={onDecrease}>-</button> </div> ); }; Counter.defaultProps = { initialValue: 0, }; export default Counter;
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useState
9번째 줄에서 useState(0)이라는 값이 배열을 반환하는 것이죠?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
inline 스타일 적용
inline 스타일을 적용할 때 div의 속성 className을 제거하는 이유가 무엇인가요?
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npx
강의에서 설치돼 있지 않은 패키지를 딱 한번만 쓰고 싶을 때 npx를 사용한다고 했는데 이게 무슨 말씀인지 좀 더 자세하게 설명해주실 수 있나요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Promise의 resolve
왼쪽이 어떻게 오른쪽과 같을 수 있나요? resolve가 콜백함수라서 그런 건가요? 맞다면 좀 더 자세하게 설명해주세요.
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npm randomcolor
해당 화면 3번째 줄에서 randomColor() 말고 randomColor라고 쓰면 왜 안되는 건가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
API 응답
await을 두 번 쓰는 이유가 fetch의 리턴 값인 Response (Promise 객체 타입)가 언제 올지 기다리기 위함인가요?위 질문에서 Response 객체는 Promise 객체와 같다고 생각해도 되나요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
async
11번째 줄에서 res가 "hello Async"라는 건 알겠는데 갑자기 어디에서 튀어 나온 변수인지 모르겠습니다. 혹시 Promise의 executor resolve인가요? 맞다면 왜 그런 건가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Promise 객체
resolve, reject, then, catch 모두 Promise 객체에 기본적으로 들어있는 메서드가 맞는 건가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
조건문 업그레이드
제일 마지막 줄의 원리를 제가 설명해 볼 테니까 틀린 부분이 있다면 말씀해주세요!mealType이 null이므로 meal[mealType] 역시 null이고 이 값은 falsy하기 때문에 결국 getMeal에서 최종적으로 리턴하는 값은 "굶기"인 거죠?
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
카운터 만들기 app.js 오류
카운터 만들기를 진행하고 있는데 App.js에서 강사님과 동일하게 만들었으나 vs에서는 계속 에러나고 코드샌드박스에서는 app.js에 export default App ; 요 문구만 넣으면 에러가 발생하는데 왜그런걸까요?https://codesandbox.io/s/floral-rain-jhruuz?file=/src/App.js
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
6-8강 새 일기 추가가 안됩니다
일기작성 페이지에서 일기를 작성하고 홈화면으로 넘어가는건 되는데, 더미리스트만 렌더링되고 새 일기는 나오지 않습니다. 다른 수강생분들도 이부분에서 오류가 많이 나시는것같아서 참고해보았는데 해결되지않아 질문드립니다!
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
context.Provider에 관해서 질문 드립니다.
중첩으로 관리하는 이유에서 살짝 뇌정지가 와서 제가 이해한게 맞는지 여쭙니다.만약 value에 다 전달하게 되면 DiaryEditer와 DiaryList가 동시에 리렌더링 되지만바꾸면 data는 editor에 영향을 안주니까 editor와 List가 따로 리렌더링 일어나게 일어나게 된다는 말인가추가적으로 궁금한건 DiaryStateContext value에 다 넣으면 최적화가 풀린다고 했는데 DiaryItem은 memo를 하고 export 해서 모든 Item이 다시 리렌더링 되는걸 막았잖아요. 근데 그 최적화 마저 풀려버리나요?