Web dev/React6 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. Redux-saga 알아보기 채용 과정을 진행하면서, redux-saga를 기술 스택으로 쓰고 있는 회사를 종종 보게되었다. 그리고 현재 과제 전형을 진행하고 있는 회사에서도 redux-saga를 쓰고 있었다. redux-saga가 무엇인지 전혀 배경지식이 없어서, 아래 아티클을 요약하며 읽어보았다. https://min9nim.vercel.app/2020-04-23-redux-saga/ redux-saga 가 해결하는 문제 본 글에서는 redux-saga 를 알고 싶지만 왠지 높아 보이는 진입장벽으로 마음이 불편한 개발자들을 위해 작성되었다. redux-saga 가 필요한 이유와 redux-saga 가 어떤 문제를 해결하는 지에 대한 이해를 min9nim.vercel.app - Redux-saga가 등장하게 된 배경 프로그래밍이란.. 2023. 6. 24. 리액트 프로젝트 구조 설계 (DDD) https://xiubindev.tistory.com/142 React 프로젝트 구조 설계를 넘어서 프론트엔드 아키텍처 설계에 대한 고찰 React 폴더 구조를 어떻게 구성할까? 비즈니스 로직은 어떻게 분리할까? React와 같은 라이브러리로 신규 서비스를 개발하게 되면 프론트엔드 팀에서 가장 첫 번째로 고민해야 할 요소는 프로젝트 xiubindev.tistory.com 위 글을 읽고 간단하게 남기는 글. 요즘 기능구현 챌린지를 하고, 포트폴리오 사이트 구상을 하면서 "개발을 잘 하는 건 뭘까?" 라는 고민을 계속 하게 되었다. 더 나은 구조의 소프트웨어를 설계하는 것이 말처럼 쉽지 않다는 것을 느꼈고, 다른 분들의 고민을 읽어보고 싶었다. 그러던 차에 한 개발자분의 블로그에서 React 프로젝트 구조 .. 2023. 6. 24. 이전 1 2 다음