Web dev39 React setState를 작성하는 방법들 리액트는 배우면 배울수록 같은 내용도 새롭게 다가오는 듯 하다. 오늘은 리액트 공식문서(해당부분)에서 setState를 사용하는 방법 두가지에 대해 학습했다. 1. pass the next state directly function handleClick() { setAge(age + 1); // setAge(42 + 1) setAge(age + 1); // setAge(42 + 1) setAge(age + 1); // setAge(42 + 1) } // 변경된 age는 다음 렌더링부터 반영되므로, age는 계속 42의 값을 갖는다. 2. pass a function that calculates it from the previous state function handleClick() { setAge(a =.. 2023. 7. 21. React로 생각하기 (Feat. 공식문서) - 리액트로 프로젝트를 구현하면서 state를 남발하는 요즘... 이게 맞는건가? 라는 찝찝함이 남아 공식문서의 'React로 생각하기' 파트를 다시 읽어보았다. 처음 배울 때도 이 챕터를 읽기는 했지만, 지금 읽으면 또 다를 것이 분명하기때문에 ㅋㅋㅋㅋ 다시 정독 ㄱ ㄱ ! - 요즘 단순히 구현만 짠! 해내면 되는게 아니고, 정확한 용법으로 기능들을 사용하고 코드를 짜는 것은 더 많은 공부와 노력을 들여야 하는 일임을 절실히 느낀다. 돌아가기만 하면 되는 코드를 짜고 만족하지 말자! 그리고 꼭 꼭 공식문서를 더 많이, 더 자주 읽자. 이에 기반해서 내가 제대로 코드를 짜고 있는지 점검하는 습관을 들이자! 이 문서 (구버전) 다. 1. UI를 컴포넌트 계층 구조로 나누기 - 모든 컴포넌트의 주변에 박스를.. 2023. 7. 14. 과제 프로젝트 설계 및 에러 기록 - 초기 전역상태 및 컴포넌트 설계 - tailiwind.config.js 파일에서 js / jsx 파일 확장자 정확히 작성하기 ( 이 둘은 다르다!! js / jsx 차이 글 참고) - tailwind.config.js 파일에서 파일 경로 정확히 작성하기 - redux toolkit reducer에서 dispatach(action(payload))로 전달하는 부분 혼동하지 않고 console 찍어보며 정확히 작성하기 - reducer 로직 개선하기 - MainCalendar 내에서 flex가 의도한 대로 적용되지 않아서, 이 부분을 해결하는데에 시간이 오래 걸렸음 2023. 7. 4. ESLint, Prettier 자동화 세팅하기 (feat.husky) 프리온보딩 첫 주차 세션에서 ESLint, Prettier 세팅이 협업에서 매우 필수적임을 배웠다. 그 전에도 팀 프로젝트에서 린터와 포맷터 모두 사용했지만, 이를 자동화하여 사용할 생각은 하지 못했다. (수동으로 config 파일을 깃에서 fork 할 때 받아와서 에디터에서만 사용했고, push, commit시 체크하지 않았던 기억...) 린터/ 포맷터의 필요성과 자동화 세팅 방법에 대해 배운 것을 채용 과제를 하며 적용해보기로 했다. 자동화는 Husky의 도움을 받을 것이다. 초반에는 세팅이 조금 번거로울지라도, 회사에서 협업 시 필수이므로 지속적인 개발 생산성 향상을 위해 지금 시도해보기로 했다. 1. 설치 - lintting 기능은 ESLint / formatting은 Prettier를 사용 - .. 2023. 7. 1. 이전 1 2 3 4 ··· 10 다음
