69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨실전 리액트 프로그래밍
'react-redux 없이 직접 구현하기' 강의 중 궁금한 점이 있어 질문합니다.
안녕하세요. 강의 'react-redux 없이 직접 구현하기'를 듣던 중 궁금한 점이 있어 질문하게 되었습니다. 강의에서 아래와 같은 코드를 작성하셨습니다. const [, forceUpdate] = useReducer((v) => v + 1, 0); 설명하실 때 "상태값 변경 함수(forceUpdate)를 호출할 때마다. 상태값을 변경하는 코드이다. 이 함수(forceUpdate)가 호출될 때마다 컴포넌트를 렌더링하기 위해 작성했다."라고 말씀하셨습니다. 그런데 여기서 "컴포넌트를 다시 렌더링하는 것은 useState를 써도 되지 않을까?" 하는 생각이 들어 해당 라인에 useReducer를 useState로 바꿔서 실행해보니 오류는 발생하지 않았지만 timeline이 하나밖에 추가가 되지 않았습니다. useReducer를 사용한다는 것은 redux에서 발생하는 모든 action들에 대해 감지를 한다는 뜻일까요? 위의 코드가 정확히 구체적으로 어떤 역할과 효과를 가져오는지 잘 모르겠습니다. 답변 주시면 감사하겠습니다.
- 미해결실전 리액트 프로그래밍
안녕하세요 해당 오류는 어떻게 해결하면 될까요 ㅠㅠ?
ㅇ
- 미해결실전 리액트 프로그래밍
선생님 질문있습니다 !
const reducer = createReducer(init, { [types.ADD]: (state, action) => state.timelines.push(action.timeline) , [types.REMOVE]: (state, action) => state.timelines = state.timelines.filter(timeline => ( timeline.id !== action.timeline.id )) , [types.EDIT]: (state, action) => { const index = state.timelines.findIndex(timeline => timeline.id === action.timeline.id); if (index >= 0) { state.timelines[index] = action.timelines; } }, [types.INCREASE_NEXT_PAGE]: (state, action) => (state.nextPage += 1), [types.ADD_LIKE]: (state, action) => { const timeline = state.timelines.find( item => item.id === action.timelineId ); if (timeline) { timeline.likes += action.value; } }, [types.SET_LOADING]: (state, action) => (state.isLoading = action.isLoading), [types.SET_VALUE]: setValueReducer }); export default reducer; 다른곳에서는 (state,action) 2개를 적어줬는데 setValueReducer 에서는 단순 함수만 호출해주었는데도 setValueReducer(state,action) 이렇게 state와 action 사용이 가능한건가요 ???
- 미해결실전 리액트 프로그래밍
[getFriends,getAgeLimit] 질문 있습니다!
selector.js 부분에서 //reselect 함수 사용 export const getFriendsWithAgeLimit = createSelector( [getFriends, getAgeLimit], //선택자 함수 //위에서 반환하는 값(getFriends,getAgeLimit) 을 받아서 작성 //해당 함수는 friends 와 ageLimit이 변경되지 않았더라면 filter를 사용하지 않고 이전의 연산 값을 재사용. (friends, ageLimit) => { console.log("getFriendsWithAgeLimit called ") console.log(friends, ageLimit); return friends.filter(item => item.age <= ageLimit) } ); 1.createSelector의 첫 번째 인자로 [getFriends, getAgeLimit]은 단순히 변수로 사용하는 역할만 하는건가요? 첫 번째 인자가 어떤 역할을 하는지 이해가 잘 안갑니다 ㅠㅠ 2.(friends, ageLimit) 의 인자값은 위에서 getFriends와 getAgeLimit을 뜻하는건가요 ?!
- 미해결실전 리액트 프로그래밍
질문있습니다 !
[REMOVE] : (state,action) => ( state.timelines = ... ) 에서 " ( " 괄호와 ":"가아닌 "=" 를 사용하신 이유가 궁금합니다. 1."(" 괄호는 없어도 정상작동되는데 굳이 사용하신 이유가 있으신가요 ?! 2. 속성값을 덮어씌울 땐 ":" 로 나열해서 덮어씌웠는데, immer에서는 "=" 로 속성을 덮어씌워주는건가요 ?
- 미해결실전 리액트 프로그래밍
createReducer 질문있습니다
function createReducer(init,handlerMap){ return function(state = init, action) { return produce(state,draft =>{ .... } } } return function(state = init, action) 이 부분이 이해가 안됩니다. 리듀서 만들 때 function createReducer(state = init, action ) { switch(action.type) { ... } } 이런식으로 만들고 있었는데요 이 방법이 아닌 굳이 init , handlerMap을 사용하신 이유가 있을까요 ?? function(state = init , action ) 이렇게 한번에 적으면 단점이 있을까요 ?
- 해결됨실전 리액트 프로그래밍
middleware 구조에 대한 질문이 있습니다.
안녕하세요. 미들웨어 구조에 대해 궁금한 점이 생겨 질문을 하게 되었습니다. const loggerMiddleware = (store) => (next) => (action) => { ... } 미들웨어가 위의 처럼 화살표 함수로 구조를 이루는 것으로 알고 있습니다. 그런데 왜 이렇게 화살표 함수로 써야하는지 잘 모르겠습니다. 검색과 책을 참고해도 명확히 이해가 되지 않네요. 왜 이런 구조를 가져야 하는지 자세하게 설명해주실 수 있으실까요?답변 주시면 감사하겠습니다.
- 해결됨실전 리액트 프로그래밍
Context API 관련 질문이 있습니다.
안녕하세요. 얼마전에 수강등록 하여 열심히 듣고 있습니다. (좋은 강의 감사드립니다. 👍) 📌 강의는 "콘텍스트 API로 데이터 전달하기" 입니다. 여기서 부터 질문입니다. 1️⃣ 'username'과 같이 Consumer에서 받을 때는 아무 이름이나 사용해도 상관없는건가요? 강의 '콘텍스트 API로 데이터 전달하기'를 보게 되면 'Greeting' component에서 'App' 컴포넌트의 'Provider'가 보낸 'value="mike"' 값을 'username'이라는 naming된 변수(?)로 받던데요. 이름이 다르지만 연동이 되는건가요? 2️⃣ (강의 12분대) Provider의 value 값을 객체 상태값으로 바꾸게 되면 왜 Consumer가 rendering 되지 않는건가요? 강의에서 부모 컴포넌트에서 'count' 값에 변화를 주게되었을 때, 하위 컴포넌트(Greeting)는 해당값(count)을 사용하지 않지만 가상돔에서 변경감지를 하여 부모 컴포넌트가 다시 rendering되기 때문에 'React.memo'를 사용하지 않는 하위 컴포넌트(Greeting)도 rendering이 된다고 이해했습니다. 그래서 이에대한 해결책으로 부모 컴포넌트의 Provider의 value를 아래처럼 바꾸셨습니다. const [username, setUsername] = useState('mike'); const [age, setAge] = useState(0); <UserContext.Provider value={{username, age}}>... const [user, setUser] = useState({username: 'mike', age: 0}); <UserContext.Provider value={user}>... 이전에 'Provider'를 가지고 있는 컴포넌트가 rendering 될 때마다 value도 새로 만들어진다고 말씀하셨는데, 그렇다면 각각 상태를 가지던 username, age를 user 라는 하나의 객체상태값으로 바꿔도 어차피 rendering 되면 객체(user)가 새로 만들어지는 것 아닌가요? 제가 잘 못 이해를 하고 있는건지 혼동이 옵니다. 답변주시면 감사하겠습니다.
- 미해결실전 리액트 프로그래밍
컴포넌트 외부 변수 문의
강사님 안녕하세요. 초보적인 질문을 하나 드리려고 합니다. 컴포넌트 외부에서 특수사항을 제외하고 let 변수를 사용하면 안되는 것이 맞나요? 저는 컴포넌트가 중복되어 여기 저기 활용될 시, 외부 변수가 공유되는 줄 모르고 있었는데요. 개발을 하면서 먼가 이상해서 확인해보니 let 변수가 바뀌면 다른 곳에서 사용된 동일 컴포넌트에서도 변경된 값이 동일하게 적용되더라고요.. 초보적인 문의를 드려 죄송합니다;;
- 해결됨실전 리액트 프로그래밍
로그아웃 기능 관련 문의
안녕하세요. 강의 마지막부분에 설명해주신 로그아웃 기능 관련 문의를 드리려합니다. 우측 상단에 있는 로그아웃 버튼을 클릭하게 되면 클릭하자마자 쿠키에 저장된 User 관련 정보가 사라짐으로써 기본 페이지가 로딩되지 않고 로그인 페이지로 리다이렉션이 되어야 하는 것이 정상 시나리오인것 같은데요. 로그아웃 버튼을 클릭하면 리다이렉션이 이루어지지 않은 채 그대로 멈춰있네요. 그 상태에서 새로고침을 하게 되면 로그인 페이지로 리다이렉션이 되고요. 뭔가 놓친 부분이 있는건가요?? 작성한 소스코드 링크를 올려드릴테니 확인해주시면 감사하겠습니다. https://drive.google.com/file/d/1NofoiWcbaZrAl8DV-ZlZREclhx7qlrrX
- 해결됨실전 리액트 프로그래밍
BestScore 표현이 NaN 으로만 나타납니다.
한단계식 나아갈때마다 찾지 못할 에러에 빠지네요 ㅠㅠㅠ 전체다 코드 점검을 해본것 같은에,,,,, 제 힘으로 찾아지지가 않습니다 ㅠㅠ BestScore에서 숫자로 표현되지 않고 NaN으로 표현됩니다. 코드는 깃허브 주소에 있습니다. https://github.com/Doha-Dev/game2048 감사합니다!!
- 미해결실전 리액트 프로그래밍
spread연산자 질문있습니다
해당 구문에서 spread연산자는 붙여주는 역할을 하는 것으로 알고 있는데 ...state,user : { ...state.name , name : action.name } 이러면 user객체안에 action.name을 추가되어 mike와 수정된 데이터가 새로이 추가되는것이 아닌가요 ? 여기서는 수정?의 개념으로 기존 data인 mike가 없어지고 수정된 이름으로 변환되는것같아서요 !! 만약 기존의 mike는 냅두고 버튼을 클릭했을 때 user에 action.name을 추가하고 싶은 경우라면 어떤 방식으로 작성해야하나요 ?
- 미해결실전 리액트 프로그래밍
useImperativeHandle
매번 답변해주셔서 감사합니다 질문 안 하고 싶은데 정말 모르는 거 투성이네요 열심히 하겠습니다 . useImperativeHandle(ref, () => ({ })); 에서 보통 ()=>{ } 이런식으로 사용하지 않나요 ? 여기서는 ()=> ( {} ) '()' 를 넣어주셔서 왜 넣은건지 궁금합니다. ㅠㅠ
- 미해결실전 리액트 프로그래밍
useCallback, useMemo
두개의 차이점이 함수를 return , 값을 return 하는 거 같은데 혹시 사용시점이나 명확한 차이점이 더 존재할까요 ? 또 import React, { useMemo, useState } from 'react'; export default function App(){ const [name, setName] = useState(); const [age, setAge] = useState(0); const [v1, setV1] = useState(0); const value = useMemo(() => runExpensiveJob(name, age), [name, age]); return ( <div> <p>{`name is ${name}`}</p> <p>{`v1 is ${v1}`}</p> <Edit onSave = {value} setName = {setName} setAge = {setAge}></Edit> <button onClick={() => { setV1(Math.random()) }}> 변경 </button> </div> ); } const Edit = React.memo(function ({ onSave, setName, setAge }) { console.log("UserEdit render"); return null; }); function runExpensiveJob(v1,v2) {} 이렇게 useCallback이아닌 useMemo를 사용할 경우 리렌더링이 되지 않더라구요 명확한 차이점이 뚜렷하지 않아 헷갈립니다 단순히 useCallback은 함수를 리턴할 경우 사용하고 useMemo는 값을 리턴할 때 사용하는건가요 ?
- 미해결실전 리액트 프로그래밍
buttonRef에대해
안녕하세요 ! buttonRef 값은 inputRef 처럼 정의해줘야할까요 ???
- 미해결실전 리액트 프로그래밍
질문있습니다
{} 괄호를 한 번만 사용할때가 있고 두번 {{ }} 을 사용하여 변수값을 할당받는데 차이가 있을까요 ? ${}와 {} {{}} 의 개념이 헷갈립니다. 또 {} 안의 공백은 그냥 JSX의 규칙인가요 ?
- 실전 리액트 프로그래밍
7:34부분 질문있습니다
삭제된 글입니다
- 미해결실전 리액트 프로그래밍
질문있습니다
//tileList : 초기값 배열 export function makeTile(tileList) { console.log(tileList); let tile; //타일이 없으면 만든다 //여기서 "undefined의 반대는 true " while (!tile || checkCollistion(tileList,tile)) { tile = { x: getRandomInteger(1, MAX_POS), y: getRandomInteger(1, MAX_POS), value: 2, }; } return tile; } 해당코드에서 타일 리스트를 찍어본결과로 값이 있는 tile로 매번 생성이되는데, 처음 초기화할때는 빈배열인 상태로 들어와야하는 거 아닌가요 ?
- 해결됨실전 리액트 프로그래밍
강의를 따라 공부중인데 어디서 막혔는지 모르겠습니다.
키보드 조작하는 부분까지 강의를 따라 만들어둔 상태입니다. (스코어 부분 시작 직전까지, 약 37분 45초까지) * 키보드 동작을 넣기전에는 4x4 셀을 그린 후 두 곳에 랜덤하게 숫자2를 표현하였습니다. * 키보드 동작까지 완료 후 4x4 셀을 그린 후 아무런 타일이 생성되지 않고 있습니다. 키보드 동작시에 에러도 없습니다. 강의 진행 중 아무런 에러도 발생하지 않고 코드를 역추적해가며 살펴봐도 어디 부분에서 잘못을 했는지 찾아지지가 않습니다 ㅠㅠ 도움이 필요합니다! * 깃에 올려둔 코드 주소입니다( https://github.com/Doha-Dev/game2048.git )
- 미해결실전 리액트 프로그래밍
질문있습니다
각 장마다 react-creact-app으로 생성하시고 관리하시는건가요 아니면 한 프로젝트안에서 폴더를 계속 만들어 관리하시는건가요?