월 22,000원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결지금 바로 React 시작하기
지금 바로 React 시작하기 heart 연습문제
지금 바로 React 시작하기 heart 추가/제거 연습문제1:39초 15번째라인 div안 span 태그속에{heart}라고만 써도 되나요? 동작은 똑같이 됩니다.let heart로 정의가 되어있는데span에서도 다시 정의해서 써야하는건지 궁금합니다!
- 미해결지금 바로 React 시작하기
React에서 이벤트 처리하기(추가퀴즈)
교안 [참고할만한 자료]도 읽어보고 고민을 해보았는데추가퀴즈에 대한 정답에 대한 방향성을 모르겠어요import { useState } from "react"; function App() { return <div>{user.login ? <HomePage /> : <Login />}</div>; } function HomePage() { return ( <div> <h1>Welcome {user.nickname}</h1> <button>로그아웃</button> </div> ); } let user = { login: false, id: "dw", pw: "1234", nickname: "june", }; function Login() { const [id, setId] = useState(""); const [pw, setPw] = useState(""); const handleLoginSubmit = (e) => { e.preventDefault(); if (id === "") { alert("아이디를 입력하지 않았습니다."); } else if (pw === "") { alert("패스워드를 입력하지 않았습니다."); } else { if (id === user.id && pw === user.pw) { alert("로그인 성공"); user.login = true; } else { alert("잘못된 정보"); } } console.log(user.login); }; const handleLoginInput = (e) => { setId(e.target.value); }; const handlePasswordInput = (e) => { setPw(e.target.value); }; return ( <form onSubmit={handleLoginSubmit}> <label> 아이디 : <input type="text" onChange={handleLoginInput} /> </label> <br /> <label> 비밀번호 : <input type="password" onChange={handlePasswordInput} /> </label> <button type="submit">로그인</button> </form> ); } export default App;
- 미해결지금 바로 React 시작하기
Route 퀴즈를 풀어봤는데 한번 봐주실 수 있나요?!
안녕하세요, 강사님!강의 정말 재밌게 듣고 있습니다ㅎㅎㅎ제가 React Router 강의에서 나온 퀴즈를 codesandbox에서 풀었는데 이렇게 사용하는게 맞을까요?수정해야할 부분이 있다면 알려주시면 다시 공부해보고 싶습니다!codesandbox : https://codesandbox.io/s/react-router-dom-v6-practice-nxvwlm?file=/src/App.jsx
- 미해결지금 바로 React 시작하기
구조 분해 전 후
구조분해할당 전 코드는 당연히 실행이 가능합니다만구조분해할당 후 코드는 실행시 에러도 안뜨고 값이 안나오네요...
- 미해결지금 바로 React 시작하기
3분 44초
3분 44초 부분에서 (e) 를 넣는 이유를 잘 모르겠습니다.
- 해결됨지금 바로 React 시작하기
비동기 통신에 있어서 질문남깁니다.(코드첨부)
서버에서 데이터를 가져와 렌더링 해주고자 아래처럼코드를 짜봤는데, Uncaught TypeError: Cannot read properties of undefined (reading 'map') 위와 같이 lists를 못불러오는 것 같은 에러를 냅니다. import React, {useState, useEffect, Fragment} from "react"; const token = localStorage.getItem('token'); function Main() { const [lists, setLists] = useState([]); useEffect(() => { const getData = async () => { try { const res = await fetch('http://localhost:8080/todos', { method: 'GET', headers: { 'Authorization': token }, }) const result = await res.json() setLists(result) } catch (error) { console.log(error); } } getData() }, []) return ( <div className="Main"> <h1>Main</h1> <ul> {lists.data.map(list => <li key={list.id}> <h2>{list.title}</h2> <h3>{list.content}</h3> </li>)} </ul> </div> ); } export default Main; 이상한점은, 강사님의 코드로 몇줄 추가하면 잘 렌더링이 되는게 이해가 되지 않습니다ㅜㅜ 아래는 잘 렌더링이 되는 코드입니다. import React, {useState, useEffect, Fragment} from "react"; const token = localStorage.getItem('token'); function Main() { const [error, setError] = useState(null); const [isLoaded, setIsLoaded] = useState(false); const [lists, setLists] = useState([]); useEffect(() => { const getData = async () => { try { const res = await fetch('http://localhost:8080/todos', { method: 'GET', headers: { 'Authorization': token }, }) const result = await res.json() setLists(result) setIsLoaded(true) } catch (error) { setIsLoaded(true) setError(error) } } getData() }, []) if (error) { return <div>애러입니다! {error.message}</div> } else if (!isLoaded) { return <div>로딩중!</div> } else { return ( <div className="Main"> <h1>Main</h1> <ul> {lists.data.map(list => <li key={list.id}> <h2>{list.title}</h2> <h3>{list.content}</h3> </li>)} </ul> </div> ); } } export default Main; 위의 코드에서 lists가 undefined인 이유가 무엇일까요..?
- 미해결지금 바로 React 시작하기
정답안에 압축파일안에 컴포넌트 이름이 잘못 된 것 같습니다.
정답 코드 압축풀고, 컴포넌트 열어서 StockCounter봤는데, 함수형 컴포넌트 명시가 GoodsCounter로 되어있고 export default 도 그렇게 되어있네용
- 미해결지금 바로 React 시작하기
코드 한번만 봐주실수 있나요 ?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Anton&family=Edu+VIC+WA+NT+Beginner&family=Indie+Flower&family=Permanent+Marker&family=Shadows+Into+Light&display=swap" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.js"></script> </head> <body> <style> #Container{ border: 3px solid black; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 10px; } #Container div { box-sizing: border-box; border: 5px solid orange; height:200px; width:32%; margin:5px; padding: 20px; font-size: 30px; } </style> <div id="actionBox"> <input type="text" placeholder="Type anything"> <button onclick="clickMe()">Click Me!</button> <button onclick="changeRadius(10)">Rounded</button> <button onclick="changeRadius(15)">Circle!</button> <button onclick="changeRadius(0)">Rectangle!</button> <button onclick="changeColor('red')">Red!</button> <button onclick="changeColor('green')">Green!</button> <button onclick="changeColor('blue')">Blue!</button> </div> <div id="Container"> <div class="textBox" id="1"></div> <div class="textBox" style="font-family:'Anton'" id="2"></div> <div class="textBox" style="font-family:'Edu VIC WA NT Beginner'" id="3"></div> <div class="textBox" style="font-family:'Indie Flower'" id="4"></div> <div class="textBox" style="font-family:'Permanent Marker'" id="5"></div> <div class="textBox" style="font-family:'Shadows Into Light'" id="6"></div> </div> <script> let divs = document.querySelectorAll('.textBox') function reducer(state, action) { console.log(state, action); if (state === undefined) { return { color: 'orange' } } var newState; if (action.type === 'CHANGE_COLOR') { return{ ...state, color: action.color } } else if (action.type === 'CHANGE_TEXT'){ return{ ...state, text: action.text } } else if (action.type === 'CHANGE_RADIUS'){ return{ ...state, radius: action.radius } } } var store = Redux.createStore( reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); function clickMe(){ let text = document.querySelector('input') store.dispatch({type:'CHANGE_TEXT', text:`${text.value}`}) var state = store.getState(); divs.forEach((e) => { e.innerText = `${state.text}` }) text.value = ""; } function changeColor(e){ store.dispatch({type:'CHANGE_COLOR', color:e}) var state = store.getState(); divs.forEach((e) => { e.style.border = ` 5px solid ${state.color}` }) } function changeRadius(r){ store.dispatch({type:'CHANGE_RADIUS', radius:r}) var state = store.getState(); divs.forEach((e) => { e.style.borderRadius = `${state.radius}px` }) } </script> </body> </html> 이런식으로 onclick 시 함수 호출하면서 값을 전달해주고, 함수내에서 dispatch를 실행하고 foreach로 속성바꿔주는 식으로 했는데, 꼭 onclick할때 dispatch를 해줘야하는건가요 ? 이런식으로 하니까, subscribe는 필요없는거같아서요. 아마 일괄적으로 바꿔주는 방식이라서 제가 이렇게 가능했던거 같은데, 개별적으로 값을 바꿔주는 과제였다면 좀 달라졌을까요?