React-Redux 패키지와 Hooks 사용 React-Redux 패키지 설치 Provider 컴포넌트 사용 (내용 추가 필요) React-Redux에서 제공하는 Provider 컴포넌트를 리액트의 최상위 컴포넌트로 정의한다. index.js /redux/index.js useSelector state 값만 인수로 받는다. → Store의 상태에 접근해서 데이터를 가져온다. 리덕스의 Store를 subscribe하고 액션이 dispatch 될 떄마다 selector를 실행한다. 그리고 useSelector()는 기본적으로 형변환 비교(==)가 아닌 엄격한 비교(===)를 사용한다. useDispatch 컴포넌트 내에서 dispatch를 사용할 수 있게 해준다. 이 dispatch를 이용해 action을 발생시킨다. 참고

Redux 란? 리덕스는 간단하게 말해서 자바스크립트를 위한 상태 관리 프레임워크이다. Action이라 불리는 이벤트를 통해 프로젝트의 상태를 관리하고 업데이트하는 패턴 및 라이브러리 상태를 예측할 수 있는 방법으로만 업데이트를 할 수 있도록 규칙을 정해 전체에서 사용하는 중앙 집중식 상태 저장소 📚 Redux를 사용하는 이유 → Redux로 상태를 관리하기 위해서 나의 경우에는 React 프로젝트를 진행하며 각 컴포넌트 간에 값을 props로 전달을 하고 있던 중 하위에 전달해야하는 컴포넌트 deps가 증가하게 되면서 Redux를 접하게되었다. 리덕스를 사용할 경우 Store라는 외부에 값이 저장되어 상태가 관리되기 때문에 프로젝트의 많은 부분에서 사용되는 전역 상태를 관리하는데 도움이 된다. Redux 사용 장점 Redux 주요 개념 단방향 데이터 흐름 Action이 Dispatcher를 통해 Store에 전달되는 흐름 Action , 속성으로 구성되고 상태값은 오직 해당 객…

블로그 포스팅을 하면서 마크다운 문법을 사용하는데 문법 공부할 겸 항상 여러 사이트에 찾아보기 번거로워서 정리를 해보기로 했다. 줄바꿈 스페이스바 2번 + Enter 중첩된 구조 중첩된 구조를 표현할 때 스페이스바를 2번씩 추가를 하면 된다. 첫번째 두번째 (스페이스바 2번) 세번째 (스페이스바 4번) Header h1 h2 h3 h4 h5 h6 h1과 h2는 아래와 같이 표현할 수도 있다. 텍스트 강조 강조된 텍스트 취소선 취소된 텍스트 밑줄 밑줄 있는 텍스트 글자 색 하늘색 글씨 코드 블록 inline 코드 블록 이것은 입니다 코드 블록 링크 링크만 있는 inline 링크 https://hwajin-blog.netlify.app/ 설명 있는 inline 링크 나의 개발 블로그 동일 파일 내에서의 문단(헤더) 이동 링크 설명 있는 inline 링크 문단(헤더) 링크 복사 헤더 제목 문자열을 복사해서 에 복사한다. 특수 문자를 제거한다. 공백을 로 변경한다. 대문자는 소문자로 변…

USEEFFECT 2.0 Introduction to useEffect componentWillUnmount, componentDidMount, componentWillUpdate와 비슷 이 모든 것이 같은 function. react hooks로 작업할 때 이 function이 중요하다. useEffect는 2개의 인자를 받는데 첫번째는 function으로서의 effect. componentDidUpdate와 기능이 비슷하다. useEffect는 componentDidMount 역할을 해서 새로고침 시 sayHello()가 실행된다. 그렇지만 componentDidUpdate 역할도 해서 클릭 시 sayHello() 실행 두번째 인자는 dependency의 deps. 만약 deps가 있다면 effect는 (deps) 리스트에 있는 값일 때만 값이 변하도록 활성화 될 것이다. useEffect()가 deps 리스트에 있는 값이 변할때만 실행되게 한다. componentWillUpd…