본문 바로가기

전체보기106

[React] setState로 배열(array)와 객체(object) state 변경하기 참고 링크 : https://dev.to/andyrewlee/cheat-sheet-for-updating-objects-and-arrays-in-react-state-48np 배열(Array) const [state, setState] = useState([]); 배열에 엘리먼트 추가하기 1. slice 메소드로 배열 복사 후, 엘리먼트를 추가한 뒤 setState에 넣기 const AddElement = (element) => { const newState = state.slice(); // 기존 배열을 slice 메소드로 복사 newState.push(element); // 새 배열에 element 추가 setState(newState); // 새 배열을 setState에 입력하기 } 2. sprea.. 2021. 11. 23.
[코드스테이츠] 4주 Final 프로젝트 회고 코드스테이츠에서 4주 Final 프로젝트를 마무리했다. 2주 프로젝트를 함께했던 멤버들이 좋았어서, 팀원 교체 없이 파이널 프로젝트를 진행했다. 그러나 2주 프로젝트 때와 달리 파이널 프로젝트 때 나는 팀장을 자원해서 맡았다. 여기서 팀장의 역할은 해야 할 태스크와 그에 따른 데드라인을 꼼꼼하게 관리하는 것이었다. 동시에 UX 관점에서도 기획을 진행하고, 이후 서비스를 다듬고 완성도를 높여야 했다. 또한 코드스테이츠의 가이드에 따라 작성하고 제출해야 할 내용들이 있었다. 이 부분에서 팀에 기여할 수 있을 것이라 생각했고, 팀원들은 개발에만 매진할 수 있게 도와주고 싶어 팀장을 맡게 되었다. 프로젝트 관련 영상과 회고 내용을 아래에 작성했다. https://www.youtube.com/watch?v=Orq.. 2021. 11. 23.
[React] setTimeout, setState, useEffect 관계 setState, useEffect, setTimeout이 서로 어떤 영향을 주는지 여러 케이스를 테스트 해보았다. 함수 내에 setState만 2번 사용하는 경우 (setState에 number 할당) const [state, setState] = useState(false) const stateHandler = () => { setState(1) // state를 초가깂에서 1로 변경 setState(2) // state를 초가깂에서 2로 변경 } console.log('state', state) useEffect(() => { console.log('useEffect 실행') }, [state]) // console.log 결과 // state 2 // useEffect 실행 1. 결과 - stat.. 2021. 11. 11.
[React] setTimeout 내부 setState 사용 후 useEffect 동작 안 되는 에러 setTimeout 내에서 setState로 state를 변경시킨 후 useEffect를 실행시키는 코드를 구현했다. 그런데 setState가 실행되어도 useEffect가 실행되지 않았다. 원인 - setState는 비동기적으로 state를 변경시킴 - 앞에서 실행된 setState로 인해, 뒤에서 실행된 setState는 state를 바꾸지 못하므로 useEffect 실행 안 됨 - 반복문 내에 setState를 사용해도 데이터가 축적되지 않는 것과 같은 원리 const [state, setState] = useState(false) const createCareer = () => { axios .post( `${process.env.REACT_APP_SERVER_URL}/career`, { jobS.. 2021. 11. 11.
비동기 데이터 처리 순서 : 콜백함수 vs Promise Promise 내부에서 Promise와 콜백함수 중 어떤 데이터가 빠르게 처리될지 테스트 해보았다. 1. 코드 - axios 요청 이후 3개의 then 문을 사용하였다. - 첫 번째 then 문에서는 또 다른 axios 요청을 보냈다. - 이 axios 요청과 두~세번째 then 문 중 어떤 데이터를 더 빠르게 처리할지 디버깅을 해보았다. axios // AJAX 요청 .get(`${process.env.REACT_APP_SERVER_URL}/career/1`, { withCredentials: true, }) .then(res => { // 첫번째 then // axios 내부에서 추가로 AJAX 요청 axios .get(`${process.env.REACT_APP_SERVER_URL}/career/1.. 2021. 11. 11.
async을 사용했지만 콜백함수의 await에서 에러가 나는 경우 SyntaxError: await is only valid in async function 서버 API 제작 중, 함수 내에서 await을 사용할 수 없다는 에러 메세지가 발생했다. 함수 앞에 async를 붙였는데도 말이다. 원인 및 해결방안 - 함수 앞에는 async 를 기재했지만 에러 발생 - 함수 내부의 콜백함수에서 await 문법을 사용하기 위해서는, 콜백함수 앞에도 async를 붙여줘야 함 // 에러 코드 module.exports = async (req, res) => { // 함수 앞에 async 기재 Job.findAll( {where:{companyId:0}} ) .then((data)=>{ // 아래 await 사용으로 인해 에러 발생 let jobInfo = await Job.find.. 2021. 11. 10.
[React] 반복문 내에서 setState 사용? (에러) 반복문 내에서 setState를 사용했더니, 데이터가 쌓이지 않고 마지막에 넣어준 데이터만 적용되었다. 문제 상황 - 반복문 내에 setState를 사용하여 데이터 축적 시도 - 그러나 데이터가 쌓이지 않고, 반복문에서 마지막 순서의 데이터만 입력되었다. - 즉 반복문 조건이 0부터 i번째 까지라면, i번째의 데이터만 state에 입력되었다. 원인 - setState는 즉각적으로 상태를 업데이트 하지 않고, Promise를 통해 비동기적으로 상태를 변경시킨다. - 반복문을 돌리는 과정에서 setState를 사용해도, 반복문이 끝나기 전까지는 State가 변경되지 않는다. - 반복문을 돌려도 state가 바뀌지 않아서, 계속 초기 상태의 state를 사용하기 때문에 데이터가 축적되지 않는다. const [.. 2021. 11. 10.
[React] useEffect 무한루프 탈출 (에러핸들링) React에서 useEffect가 계속 작동하는 무한루프가 발생하여 이를 해결해보았다. useEffect 실행 조건 - 아래와 같이 새롭게 컴포넌트가 렌더링 될 때, useEffect의 첫 번째 인자인 함수가 실행됨 - useEffect의 두 번째 인자인 종속성 배열에 따라서 useEffect 실행 조건이 달라짐 useEffect(함수, [종속성1, 종속성2, ...]) 1. 종속성 배열 자체가 없을 때, useEffect는 아래와 같은 상황에서 작동됨 - 컴포넌트 생성 후 처음 화면에 렌더링 - 컴포넌트에 새로운 props가 전달되며 렌더링 - 컴포넌트의 state가 바뀌며 렌더링 2. 종송성 배열이 빈 배열일 때, useEffect는 아래와 같은 상황에서 작동됨 - 컴포넌트 생성 후 처음 화면에 렌더.. 2021. 11. 10.
반응형

티스토리툴바