25%
36,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
setData(() => [newItem, ...data]) 동작 순서 질문입니다.
안녕하세요~ 강의 잘 보고 있습니다.setData([newItem, ...data]) 대신에 setData(() => [newItem, ...data])를 사용하는 이유가 useCallback이 완료된 후에 setState에서 () => [newItem, ...data] 를 호출 후 사용돼서 최신 데이터도 업데이트가 되고, 메모이제이션도 가능하게 된건가요?감사합니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
이 강의의 코드는 프로그래밍 패러다임 중 어떤 것이라 볼 수 있나요?
절차형, 객체지향, 함수형 셋 중 어떤 것이라 볼 수 있나요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
DataItem 컴포넌트 질문 있습니다.
안녕하세요, 강의 잘 보고 있습니다.DataItem 컴포넌트를 생성하고 이용하는 방법에 질문 두가지가 있습니다. (질문 1) DataItem을 자바스크립트 객체로 생성하는 방법과 jsx 컴포넌트로 생성하는 방법의 차이가 궁금합니다. jsx 컴포넌트를 이용할 때는 key값을 줄 수 있는것은 아는데요, 그 외의 차이점은 없는 것 같습니다. jsx 대신 DataItem 객체를 생성해서 사용해도 되나요?a. map에서 자바스크립트 객체로 생성하는 방법<div>{diaryList.map(i => DiaryItem(i)}<div> b. jsx의 컴포넌트로 생성하는 방법<div>{diaryList.map(i => <DiaryItem {...i}/>}<div> (질문 2) DataItem에 props를 넘겨주는 방법에 대한 질문입니다. props에 {...i} 처럼 전개연산자를 이용하여 한번에 여러 값을 전달해주고 있는데요, 그냥 i를 전달해주어도 되지 않나요? 전개연산자를 이용하여 넘겨주는 이유가 리액트 문법 때문인지, 새 객체로 복사해서 넘겨주고 싶기 때문인건지, 혹은 다른 이유때문인지 질문 드립니다.<div>{diaryList.map(i => <DiaryItem {...i} />}</div>
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
setStatus, 콜백함수, 변수 스코프에 대해 질문드립니다.
강사님 안녕하세요항상 상세한 답변을 주시는 점 감사드립니다.아래의 코드를 보고 질문을 받아주시면 감사하겠습니다.import './App.css'; import Counter from './Counter'; import Container from './Container'; import {useEffect, useState} from "react"; import MyHeader from './MyHeader.js' export default function App() { const [state, setState] = useState({ a: 0, b: 0 }); const onClick = () => { const c=10; setState(c=>({ a: c + 1 })); }; return ( <div className="App"> <div>a : {state.a}</div> <button onClick={onClick}>증가</button> </div> ); }1번째 경우원래는 아래의 코드처럼 setState의 콜백함수의 인자에 state를 넣는 게 맞습니다.const c=10; setState(state=>({ a: c + 1 // 이 줄의 c는 1번째 줄의 c를 가리키므로 a: 10 + 1 과 같습니다. }));이때는 a:c+1에서의 c가 함수 밖에 선언된 맨위의 const c= 10의 c를 가리킵니다. 2번째 경우 일부러 setState의 콜백함수의 인자를 state가 아닌 c로 적어봤습니다.const c=10; setState(c=>({ //이 부분 변경 state 를 지우고 c로 a: c + 1 // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다. }));그러자 a: c + 1 에서의 c는 1번째 줄의 c가 아닌, 콜백함수 인자로 들어간 2번째 줄의 c를 가리킵니다.그래서 변수의 스코프를 공부하고 싶어서 조언을 구하고 싶습니다. 1번째 질문을 드립니다.변수가 const, let, var 인지에 따라서 스코프가 다른 것으로 아는데콜백함수의 인자로 들어간 변수는 const인지 let인지, var 인지 질문드리고 싶습니다. 2번째 질문을 드립니다.이 부분에 대해 학습하면 좋을 자료 링크를 추천해주시면 감사하겠습니다.저도 현재 변수 스코프에 대해 다시 공부하는 중입니다.3번째 질문을 드립니다.const c=10; setState(c=>({ //이 부분 변경 state 를 지우고 c로 a: c + 1 // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다. })); 에서2번째 줄의 콜백함수 인자의 c는 1번째 줄의 c를 가리키지 못하는 이유에 대해 질문드리고 싶습니다.4번째 질문을 드립니다.const c=10; setState(state=>({ //이 부분 변경 state 를 지우고 c로 a: c + 1 // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다. }));3번째 줄의 c는 1번째 줄의 c를 가리킬 수 있는 이유에 대해 질문드리고 싶습니다감사합니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
페이지구현 - 일기수정(Edit) 수정 에러 질문
정환님 안녕하세요.질문이 있습니다.DiaryEditor 컴포넌트로 onCreate, onEdit 함수를 전달하여일기를 생성, 수정 하는데요.이때, 일기 생성 후, 일기를 수정 하면 수정된 일기 + 수정된 일기가 1개 더 추가 생성이 되는 에러가 발생하여서요.어떤 부분이 문제인지 짐작이 안갑니다. ㅠㅠ아래 코드 캡쳐본 첨부드립니다.답변주시면 감사하겠습니다.그리고 강의 잘 듣고있습니다. 좋은 강의 감사합니다 :) App 컴포넌트Edit 컴포넌트DiaryEditor 컴포넌트
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
무한 루프 에러 질문드립니다.!
import React, { useState, useEffect, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; import axios from "axios"; import { BbsSettingContext } from "../common/Board"; import ToastEditor from "../component/ToastEditor"; import MyButton from "../common/ComButton"; const BoardView = ({ postId }) => { const titleInputRef = useRef(); const contentsAreaRef = useRef(); const toastEditorRef = useRef(); // ToastEditor의 ref const [post, setPost] = useState({ nttSj: "", nttCn: "", regDate: "", }); const [boardSetting, setBoardSetting] = useState(null); const boardSetData = useContext(BbsSettingContext); const Navigate = useNavigate(); const formatDate = (timestamp) => { const date = new Date(timestamp); const options = { year: "numeric", month: "long", day: "numeric" }; return date.toLocaleDateString("ko-KR", options); }; useEffect(() => { if (boardSetData) { setBoardSetting(boardSetData); axios .get(`http://localhost:8080/board/${boardSetData.bbsId}/post/${postId}`) .then((response) => { setPost({ nttSj: response.data.post.nttSj, nttCn: response.data.post.nttCn, regDate: response.data.post.regDate, }); }) .catch((error) => console.log(error)); } }, [post]); return ( <div className="BoardView"> <div className="upInfoArea"> <div type="text" name="boardTitle" className="titleDiv"> {post.nttCn} </div> <div type="text" name="regId" className="regIdDIv"> {formatDate(post.regDate)} </div> </div> <div className="contentArea"> <div className="contentsText">{post.nttCn}</div> </div> <section> <div className="btnArea"> <MyButton text={"리스트이동"} onClick={() => Navigate(-1)} /> <MyButton text={"수정하기"} type="positive" /> </div> </section> </div> ); }; export default BoardView; 질문이 있는데 useEffect에서 [post]로 하면 무한 루프가 돌고 저런식으로 [boardSetData,post.postId,post.nttSj,post.nttCn] 으로 놓으면 무한루프가 돌지 않는데 이유를 알수 있을까요 ...postId는 글번호 nttSj 제목 , nttCn 제목이며 const boardSetData = useContext(BbsSettingContext);여기서 boardSetData는 게시판 셋팅 데이터 입니다 .왜 무한 루프가 도는지 알수있을까요 .게시판 셋팅 , 글제목, 글번호 글내용이 바뀌면 useEffect의 axios가 전송 되어야 하게 할려고 합니다 근데 무한 루프가 도네요 ...
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
USESTATE, 렌더링의 비동기 시점에 대해 질문드립니다.
강사님 안녕하세요아래의 코드를 보고 질문을 받아주시면 감사하겠습니다.type testDataType = { testNumber1:number; testNumber2:number; } const Test = () => { const [testData, setTestData] = useState<TestDataType>({ testNumber1:0, testNumber2:0 }); useEffect(()=>{ AxiosPromise로 Api를 호출하는 메서드 1({}) .then((res)=>{ const responseData = res.data; console.log("responseData"+ responseData);//8출력 setTestData({ ...testData, testNumber1: responseData }) AxiosPromise로 Api를 호출하는 메서드 2({}) .then((res)=>{ const responseData = res.data; console.log("responseData"+ responseData);//8출력 setTestData({ ...testData, testNumber2: responseData }) }, []) return (<>{`${testData.testNumber1} / ${testData.testNumber2}`}</>); }일 때, testData.testNumber1 에는 비동기로 가져온 데이터가 반영되는데testData.testNumber2 에는 비동기로 가져온 데이터가 반영이 되지 않습니다.제가 생각한 리액트 코드 순서는 이렇습니다.순서1.맨 처음 마운트 시점에 Test ()가 실행됩니다.그리고 useEffect() 가 실행됩니다.2.아직 마운트 시점입니다.useEffect() 가 AxiosPromise로 Api를 호출하는 메서드 1({})과AxiosPromise로 Api를 호출하는 메서드 2({})를 비동기로 실행합니다.이때 각각의 Axios Promise들은 각각 8이라는 데이터를 읽고useState의 setTestData() 를 실행하여testData.testNumber1에는 8testData.testNumber2에도 8이 들어갑니다. 그 다음에return (<>{`${testData.testNumber1} / ${testData.testNumber2}`}</>);가 실행됩니다.그렇게 웹페이지 UI에는8/8이 보이게 됩니다.그러나 막상 실행해보면0/88/0이 나옵니다. 그리고 그 원인이 2개의 AxiosPromise 메서드에서setTestData({...testData,testNumber1: responseData})setTestData({...testData,testNumber2: responseData})를 실행하기 때문 같습니다.그런데 조금 궁금한 게 있습니다.아무리 AxiosPromise와 UseState의 setter가 비동기 메서드라도 자바스크립트의 메모리 구조에서는태스크큐라는 줄을 서게 됩니다.그리고 호출스택이 비워지면 차례대로 호출스택으로 이동하면서 차례대로 동기적으로 실행된다고 생각합니다.즉, 저 2개의 setTestData() 도 동시에 일어나지 않고 실행 순서가 있다고 생각했습니다. 그래서 2개의 비동기 메서드가 동일한 setTestData를 호출해도 문제가 없다고 생각했습니다.제 생각의 틀린 점을 지적해주시면 감사하겠습니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
게시판만들다가 질문드립니다
import "./App.css"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import MainPage from "./pages/MainPage"; import Board from "./pages/Board"; import { useEffect } from "react"; function App() { useEffect(() => console.log("app is loading"), []); return ( <BrowserRouter> <Routes> <Route path="/" element={<MainPage />}></Route> <Route path="/board/:bbsId" element={<Board />}></Route> <Route path="/board/:bbsId/new" element={<Board />}></Route> </Routes> </BrowserRouter> ); } export default App; import React, { useEffect, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; // useParams를 import import BoardList from "../pagesComponent/BoardList"; import BoardEdit from "../pagesComponent/BoardEdit"; import BoardView from "../pagesComponent/BoardView"; import Layout from "../layout/Layout"; import axios from "axios"; export const BbsSettingContext = React.createContext(); const Board = () => { const { bbsId } = useParams(); // const [currentUrl, setCurrentUrl] = useState(null); const [boardSettData, setBoardSettingData] = useState(null); useEffect(() => { let mode = window.location.pathname.split("/")[3] == null ? "list" : window.location.pathname.split("/")[3]; console.log(`mode::::::::::::::${mode}`); setCurrentUrl(mode); axios .get("http://localhost:8080/board/" + bbsId) .then((response) => { const boardSettData = response.data.bbsEntity; console.log(boardSettData); setBoardSettingData(boardSettData); }) .catch((error) => console.log(error)); }, [currentUrl]); return ( <BbsSettingContext.Provider value={boardSettData}> {currentUrl == "list" ? ( <Layout> <BoardList /> </Layout> ) : currentUrl == "new" ? ( <Layout> <BoardEdit /> </Layout> ) : currentUrl == "edit" ? ( <Layout> <BoardEdit /> </Layout> ) : currentUrl == "view" ? ( <Layout> <BoardView /> </Layout> ) : ( <BoardList /> )} </BbsSettingContext.Provider> ); }; export default Board; import React from "react"; import { useContext, useHistory } from "react"; import { BbsSettingContext } from "../pages/Board"; import PageNationPage from "./PageNationPage"; import { useNavigate } from "react-router-dom"; const BoardList = () => { const boardSetData = useContext(BbsSettingContext); console.log(boardSetData); const Navigate = useNavigate(); const handleBoardEdit = () => { // 원하는 동작을 수행할 코드를 여기에 추가 console.log("쓰기로 이동"); Navigate("/board/1/new"); }; return ( <div className="BoardList"> <table className="bbsTable"> <colgroup> <col style={{ width: "10%" }} /> <col style={{ width: "40%" }} /> <col style={{ width: "10%" }} /> <col style={{ width: "20%" }} /> <col style={{ width: "10%" }} /> </colgroup> <thead> <tr> <th scope="col">번호</th> <th scope="col">제목</th> <th scope="col">작성자</th> <th scope="col">등록일</th> <th scope="col"> 조회</th> </tr> </thead> </table> <PageNationPage /> <button onClick={handleBoardEdit}>쓰기</button> </div> ); }; export default BoardList; import React from "react"; import { useState, useEffect, useContext } from "react"; import { BbsSettingContext } from "../pages/Board"; const BoardEdit = () => { const boardSetData = useContext(BbsSettingContext); console.log(boardSetData); return <div>BoardEdit</div>; }; export default BoardEdit; 안녕하세요 다름이 아니라 일기장 보고 게시판을 응용해서 만들던 도중에 안되는게 있어서 질문드립니다.http://localhost:3000/board/1이 리스트로 나오는데요 ...거기서 쓰기를 누르면 http://localhost:3000/board/1/new으로 위에 url은 바뀌는데밑에 ui는 전혀 바뀌질 않습니다 .그리고 Board.js에 useEffect쪽에 콘솔로 찍어봐도 들어오지가 않는데 이유를 좀 알수있을까요 ????? 근데 쓰기 버튼말고 그냥 직접 url을 입력하고 enter를 입력하면 이동합니다 .
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React에서 배열 사용하기 4 - 데이터 수정하기 18분 50초 질문드립니다.
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.강사님 안녕하세요 18분 50초에서 DiaryItem.js에서 이 코드 부분 질문드립니다.스크린샷을 봐주시면 제가 임의로 {console.log("진입1")} {console.log("진입2")}를 넣었습니다.이번에는 {console.log("진입1")}을 <> </> 밖으로 뺐습니다.그러자 오류가 생겼습니다.제가 이해하기로는, JSX 표현식인 { } 은 하나의 태그로 묶어줘야 합니다.그런데 저 위치로 console.log("진입1")을 옮겨줘도<div className="content"></div>가 감싸줘서<div className="content">console.log("진입1")</div>인 것과 같아서 JSX 표현식을 태그가 감싸준 것이므로 오류가 안생겨야 할 것 같은데, 생기는 이유에 대해 질문드리고 싶습니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React에서 배열 사용하기 2 - 데이터 추가하기 10분 27초 질문드립니다.
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.강사님 안녕하세요React에서 배열 사용하기 2 - 데이터 추가하기 10분 27초 코드에 대해 질문드립니다.33라인에서const dataId = useRef(0); 을 주셨는데아래 코드처럼 useRef( ) 를 안쓰고const dataId = 0; 로 썼을 때보다 장점이 있는지 질문드리고 싶습니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[input 속성 및 state 관리] 사용자 입력 처리하기
안녕하세요.사용자 입력 처리하기 강의 관련 질문입니다. input 태그를 통해 사용자 입력을 받고, 상태 관리하면, 상태에 사용자의 입력이 반영되는 게 한 단계씩 늦는 것 같습니다. (그 이유가 useState가 비동기적으로 처리된다고 들은적이 있는 것 같은데, 정확히 이해가 가지 않아서 질문드립니다.) 아래 코드의 handleOnChange함수에서,Q1) e.target.name, e.target.value은 제깍제깍 실시간으로 반영이 되는데, input state는 한 단계 늦게 반영이 됩니다. 이런 현상이 발생하는 이유는 무엇이고, 이건 개발하는데 문제가 되지 않는 이유는 뭔지? 가 궁금합니다! import { useState } from 'react'; const DiaryEditor = () => { const [input, setInput] = useState({ author: '', content: '', emotion: 1, }); const handleOnChange = (e) => { console.log(e.target.name); console.log(e.target.value); setInput({ ...input, [e.target.name]: e.target.value }); console.log(input); }; const handleSubmit = () => { console.log(input); alert('오늘의 일기가 저장되었습니다!'); }; return ( <div className='DiaryEditor'> <h2>오늘의 일기</h2> <div> <input name='author' value={input.author} onChange={handleOnChange} /> <p>{input.author}</p> </div> <div> <textarea value={input.content} name='content' onChange={handleOnChange} /> <p>{input.content}</p> </div> <div> <span>감정 지수 : </span> <select onChange={handleOnChange} name='emotion' value={input.emotion} > <option value={1}>1</option> <option>2</option> <option>3</option> <option>4</option> <option value={5}>5</option> </select> </div> <div> <button onClick={handleSubmit}>저장하기</button> </div> </div> ); }; export default DiaryEditor; Q2) 위처럼 input이란 state는 한단계씩 늦게 반영이 되는데, select태그의 value 속성을 주는 목적은 무엇인가요??인풋의 value 속성은 실시간으로 인풋의 값과 상태를 동기화해주는 목적으로 사용한다고 생각했는데,state가 곧바로 변하지 않는거면, 이 인풋의 value 속성은 무용지물인 것 아닌가라는 생각이 들어 질문드립니다. <select onChange={handleOnChange} name='emotion' value={input.emotion} >Q3) useState의 초기값은 반드시 빈문자열등으로 인자를 전달하는 게 나은가요? 아무 인자도 전달하지 않으면 어떤 잠재적인 에러 발생 가능성이 있는건가요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[props] children 사용법 및 동작원리 질문
props 강의 관련 질문입니다!1)어떻게 컨테이너 컴포넌트에 프롭스 형태로 전달하지 않아도,<Container children = { <Counter {...counterProps} />} />2)jsx 자체를 컨테이너 아래에 중첩?! 시키는 방법만으로도 children prop으로 작용할 수 있게되는지 그 이유? 원리가 궁금합니다!!<Container> <div className='App'> <Counter {...counterProps} /> </div> </Container> import './App.css'; import Container from './Container'; import Counter from './Counter'; function App() { const counterProps = { // initialValue: 7, a: 1, b: 2, }; return ( <Container> <div className='App'> <Counter {...counterProps} /> </div> </Container> ); } export default App; 저는 예를 들어 아래와 같은 방식으로 children prop을 전달하는 걸로 생각하고 있었습니다. <Container children={<OddEvenResult count={count} />} /> 1), 2) 방식의 차이는 무엇이고(어떤 게 더 나은 방식이고?), 2)방식의 동작원리에 대해 질문드립니다!!
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
왜 useEffect의 코드가 두번찍히는지 의문입니다.
프론트는 react이고 백엔드는 스프링 부트입니다 .리액트 소스입니다 .import "./App.css"; import { useState, useEffect } from "react"; import SERVER_URL from "./config/config"; function App() { const [hello, setHello] = useState([]); useEffect(() => { if (!hello.length) { console.log(`서버주소는 ::::::::::::::${SERVER_URL}`); fetch(`${SERVER_URL}/api/headers`) .then((response) => response.json()) .then((data) => { console.log("데이터:::::::::::", data); // 데이터 출력 setHello(data); // 데이터를 상태에 설정 }) .catch((error) => console.log("Error:", error)); } }, []); return ( <div className="App"> <div>백엔드에서 가져온 데이터입니다</div> <ul> {hello.map((item) => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); } export default App; config.js 소스입니다. const SERVER_URL = "http://localhost:8080"; export default SERVER_URL; 백단입니다. package com.service.com.controll; import java.util.HashMap; import java.util.List; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import com.service.com.domain.User; import com.service.com.service.MainService; import lombok.RequiredArgsConstructor; @RequiredArgsConstructor @RestController public class MainController { private final MainService mainService; @GetMapping("/api/headers") public ResponseEntity<List<User>> getHeaders() { List<User> headerList = mainService.findAll(); System.out.println(headerList.toString().toString()); return ResponseEntity.status(HttpStatus.CREATED).body(headerList); } } 백단 로그입니다 . [User(id=1, name=a), User(id=2, name=b), User(id=3, name=c), User(id=4, name=d), User(id=5, name=e)] 궁금한 질문입니다 .서버주소는 ::::::::::::::http://localhost:8080서버주소는 ::::::::::::::http://localhost:8080데이터::::::::::: (5) [{…}, {…}, {…}, {…}, {…}]데이터::::::::::: (5) [{…}, {…}, {…}, {…}, {…}]왜 2번씩 둘다 찍히는걸까요 ..빈배열 넣었고 처음에만 작동하라고 hello배열의 길이가 없을떄?? useEffect가 작동하라고 코딩했는데 ..궁금합니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
기본적으로 App이 두번 렌더링 되는 이유는 무엇인가요?
최적화 완성까지 코드를 작성하고, 테스트를 해보면, 최초 로딩에서 DiarayEditor가 계속 두번 렌더링 됩니다. 새로운 react프로젝트를 만든 후 App에 userEffect를 적용후 확인해보니까, App자체가 두번 렌더링(Mount) 되는것 같았습니다. 그 이유를 알 수 있을까요?코드는 아래처럼 간단하게 App.js에 포함하여 확인하였습니다. useEffect(()=> { console.log("App Mount!!"); }, []); 또한 App이 두번 렌더링 되다보니, getData()가 두번씩 수행되는 문제가 있습니다. react의 버전차이인가요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트 프로젝트 생성시 질문
npx-create 시 에러나서user/Appdata/Roaming 경로 아래 npm폴더를 생성하고 재수행했더니 작동했는데 이유가 궁금합니다. 그리고 강사님께서 하시는 방법으로 바꿀수 있는 방법은 없을까요...? 매번 appdata로 가서 폴더 선택하는것이 번잡스러워서요...
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
props 사용 시 중괄호 질문
props를 사용해 전달 받을 때 어떤 상황에서 중괄호를 사용하고 특히 함수를 전달 받을 때 왜 중괄호가 필요한지 궁금합니다.const DiaryEditor = ({onCreate}) => {return} const DiaryList = ({diaryList}) => {return} const DiaryItem = ({author, content, create_date, emotion, id}) => {return}
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드 중에 질문이 있어요 ..
아래 코드에서 ${emotion} 으로 쓰는것과 그냥 {strDate}랑 하나는 $를 쓰고 하나는 안쓰는거같은데 이거 어떨떄 차이가 나는지좀 알수있을까요??import { useEffect, useState, useContext } from "react"; import MyButton from "./MyButton"; import { useNavigate } from "react-router-dom"; const DiaryItem = ({ id, emotion, content, date }) => { console.log(process.env.PUBLIC_URL + `/assets/emotion${emotion}.png`); const strDate = new Date(parseInt(date)).toLocaleDateString(); const goDetail = () => { Navigate(`/diary${id}`); }; const goEdit = () => { Navigate(`/edit${id}`); }; return ( <div className="DiaryItem"> <div onClick={goDetail} className={[ "emotion_img_wrapper", `emotion_img_wrapper_${emotion}`, ].join(" ")} > <img src={process.env.PUBLIC_URL + `assets/emotion${emotion}.png`} /> </div> <div className="info_wrapper"> <div className="diary_date">{strDate}</div> <div className="diary_content_preview">${content.slice(0, 25)}</div> </div> <div className="btn_wrapper"> <MyButton onClick={goEdit} text={"수정하기"} /> </div> </div> ); }; export default DiaryItem;
- 해결됨[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에 저장안시키고 리턴하는지 궁금합니다.