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 , 속성으로 구성되고 상태값은 오직 해당 객…

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…

USESTATE 1.0 Introduction to useState Hooks는 리액트의 state machine에 연결하는 기본적인 방법 Hooks가 생기기 전에는 class component를 사용했는데 이는 this와 같은 문장 규칙과 render와 같은 사용 방법을 고려해야 했다. 1.1 useInput useInput은 react component가 아닌 완전히 다른 function이다. 우리는 이런 이벤트를 분리된 파일, 다른 entity에 연결해서 처리할 수 있다. 1.2 useInput part2 1.1에서 작성한 코드를 좀 더 보완 initialValue를 사용하는 대신 유효성을 검증하는 기능을 포함 (validate function) maxLen 부분을 수정하여 검증할 유효성 조건을 변경할 수 있다. 1.3 useTabs

실전형 리액트 Hooks (추후 내용 정리 예정) 리액트 공부를 시작하면서 여러 강의를 찾아보다가 노마드 코더를 알게되었다. 그중 [실전형 리액트 Hooks 10개]를 수강하며 알게된 것들을 정리해 보기로 했다. #0 INTRODUCTION https://www.npmjs.com/ 이 사이트는 사람들이 각자 만든 Hook을 공유할 수 있는 사이트다. 이 강의에서는 자주 사용되는 hooks에 대해 배우고 생성한 hooks를 npm에 등록할 수 있도록 해본다. Requirements React에 대한 이해 React와 node.js 설치 Workflow hook을 생성하며 바로바로 적용되는 것을 확인하기 위해 codesandbox를 사용하여 작업 CodeSandbox 생성하기 ‘Create Sandbox’ 클릭 후 Templates로 React를 선택한다. React Hooks 리액트 Hooks 참고 영상 functional component 에서 state를 가질 수 있게 해준다. …