공부하는 개발자

리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리, 컴포넌트의 상태 관련 로직들을 다른 파일들로 분리시켜 더욱 효율적으로 관리할 수 있고, 글로벌 상태 관리도 손쉽게 할 수 있다. Context API와 useReducer 훅을 사용해 개발하는 흐름과 리덕스를 사용하는 방식이 매우 유사하다. Context API와 리덕스 차이 미들웨어 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행할 수 있다. 특정 조건에 따라 액션 무시 액션을 콘솔에 출력 혹은 서버쪽에 로깅 액션이 디스패치 되었을 때 이를 수정해서 리듀서에게 전달 특정 액션이 발생했을 때 이에 기반하여 다른 액션 발생 특정 액션이 발생했을 때 특정 JS 함수 실행 유용한 함수와 Hooks reac..

올해 10월 초부터 생각했던 사이드 프로젝트를 본격적으로 만들어 보려고 한다 (이번엔 제발 런칭까지....) 리액트를 거의 3년만에 보게 되었는데 뭐 아주 그냥 새롭다. 이야 훅은 또 뭐야? 라떼는 클래스만 있었는데 이번 포스트에서는 리액트에서 스타일 지정하는 방법을 공부해 보았다. (react modern stack에 빠삭한 지인과의 카톡) REF : https://react.vlpt.us/styling/03-styled-components.html CSS in Js : JS 안에 CSS를 작성하는 것 리액트 진영에서 가장 인기 있는 CSS in JS 라이브러리가 바로 styled-components 이다. 설치 yarn add styled-components 사용 styled.태그이름 을 사용해서 바..

와 내가 react 배울때만 해도 hook이라는게 하나도 없었는데 (생각해보면 거의 2.5~3년 전이긴 하네...) 이제는 자료를 찾아봐도 hook 사용이 default가 된 것 같다... 사이드 프로젝트를 해볼까 하여 훅을 간단히 정리해 보았다. 훅 정리 리액트 버전 16.8에 추가되었으며, 함수형 컴포넌트에도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능이다. 새로 시작하는 프로젝트라면 클래스형 컴포넌트는 지양하고 훅을 사용하는 것이 좋다. useState : state 관리 function App() { // useState(초기값)으로 [state이름, setter]를 가져온다 // state에 객체가 들어갈 수도 있음 const [number, setNumber] = useState(0)..