React

React를 처음 배우는 단계에서 component와 props를 배워보자components폴더를 생성하고, 하위 component를 해당 폴더에 저장한다.Box라는 컴포넌트를 생성한다.components폴더에 정의한 component를 상위 컴포넌트의 하위 컴포넌트로

가장 기초적이면서 가장 단순한 방법이다..css 파일을 만들어서 import 한다.

state란 컴포넌트가 가질 수 있는 상태를 의미한다.react Hooks의 useState는 컴포넌트의 state를 간쳔하게 생성하고 업데이트를 시킬 수 있게 해주는 도구를 제공한다.아래처럼 생성과 동시에 가져야 할 초기값을 useState함수의 인자로 넣어주면 두가

npm install react-router-domApp.js는 이제 router의 렌더링 페이지 역할을 수행할 것이다.특정한 어떤것을 클릭했을 시 다른 페이지로 렌더링 되는,, 즉 html의 a태그와 동일한 동작을 할 수 있는 Link하는 것이 존재한다.Link를 통

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook이다.⏩ 컴포넌트가 랜더링 될 때마다 실행된다.⏩ 컴포넌트가 화면에 첫 렌더링 될때 실행된다.⏩ value의 값이 바뀔때 실행된다.⏩ 컴포넌트가 화면에 첫 렌더링 될 때만

iusRef는 .currect속성으로 전달된 인자(초기값)로 초기화된 변경 가능한 ref object를 반환한다.⏩ ref객체에 value를 저장한다.useRef로 DOM요소에 접근할 수 있다.

Context는 앱의 모든 컴포넌트에서 사용할 수 있는 데이터를 전달할 때 유용한 Hooks이다.⏩ 상위에 있는 데이터를 원하는 위치까지 끌어내리는 과정을 말한다. 컴포넌트가 많아지면 해당 과정은 비효율적이고 이를 해결할 방법이 useContext다. Context를

useMemo > useMemo에서 Memo는 memoization을 뜻한다. 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때 이전에 계산한 값을 메모리에 저장하여, 불필요한 계산의 반복을 제거하여 프로그램의 실행 속도를 빠르게 한다. 1. useMemo선언 cons

reducer는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다.철수(dispatch)가 만원을 출금해달라고(action)Reducer(은행)에 요구를 하고 있다.

리액트는 부모 component가 렌더링 될 때 해당component에 속하는 모든 자식 component또한 렌더링 된다. but props가 바뀌지 않았다면 해당 자식 component는 리렌더링 하지 않아도 될 것이다. 이러한 불 필요한 사항을 없도록 해주는 ㅎ함

1. rudux 사용 (1) 모듈 설치 npm add redux 2. redux내부 4가지 함수 1. getState() > data를 저장할 수 있다. console.log(countStore.getState()) 2. dispatch() > dispatch를

⏩ 공식문서 : https://recoiljs.org/docs/introduction/motivation⏩ 패키지 설치 : npm install recoilrocoil을 사용하기 위해서 부모트리에 RecoilRoot를 정의해준다. Atom은 상태 조각을 나타낸