리액트,리덕스

리액트 보강하는 차원에서 리액트 공부 Virtual DOM 리액트의 차별점이라고 할 수 있는 Virtual DOM은 > 모델이 변하면 > 뷰에서 변화 , 뷰에서 변하면 > 모델 변화하는 기존 과정에서 > 변화 자체를 안하고 데이터가 바뀌면 뷰를 날려버리고 새로 만들면 어떨까 하는 생각을 함 > 하지만 매번 날려버리고 새로 만들기엔 브라우저가 감당하...

키가 없다면? 어떠한 배열이 있다 가정하고 그 사이에 무언가를 추가하게 된다면, 기존 그 자리를 차지하고 있던 친구들이 하나씩 밀려, 새로 생긴 c라는 친구가 아닌 끝까지 밀려서 마지막 위치에 있던 친구가 새로 생기게 된다. 즉, 내가 수정하지 않은 내용들도 수정이 이루어진다. 키가 있다면? 키가 있다면 기본적으로 위의 내용과는 반대로 불필요한 ...

UseMemo 예시 코드 > const count = useMemo(() => countActiveUsers(users), [users]); 첫번째 파라미터 : 어떻게 연산할지 정의하는 함수 > f countActiveUsers(users) { console.log('활성 사용자 수 세는 중'); return users.filter((user)=> ...

useEffect ? > useEffect(()=>{},) 인자 : 콜백함수 렌더링 될때마다 실행 > useEffect(()=>{},[]) 인자 : 콜백함수 , 의존성 배열 화면에 첫 렌더링 될때 , 배열 안의 값이 바뀔 때 > 기본적으로 리액트는 매 렌더링 이후에 효과들을 재적용한다. > First Render(number = 0) 순서 Com...

useReducer ? > 컴포넌트의 상태를 관리할 수 있는 React 훅. +state 의 대안+ useState / useReducer 공통점 > 둘 다 상태를 만들고 업데이트 한다. useState / useReducer 차이점 > 업데이트 방식 useState에서는 setState 함수를 사용하여상태를 업데이트 하지만 useReduce...

Context API 기본적으로 리액트에서 다른 컴포넌트로부터 데이터를 전달 받을 땐 props를 사용한다. props는 전달받고자하는 컴포넌트의 바로 위에 있는 컴포넌트로 부터 전달을 받아야하므로 굳이 필요하지 않은 과정들을 여러번 거쳐서 전달해야하는 경우가 생긴다. 그 과정이 길어지는 경우 context api를 사용할 수 있다 > impor...

리덕스 키워드를 알아보자. > Store 리덕스에선 한 어플리케이션 당 하나의 스토어를 가지게 되는데, Store의 내부에는 state(상태) , reducer , dispatch , subscribe, getState 와 같은 내부 함수들이 들어가 있다. > reducer 리듀서는 state를 입력값으로 받고 action을 참조해서 새로운 sta...

Context API 리액트 컴포넌트간 어떠한 값을 전달할 때 사용하는 방법 중 하나입니다. Props와 같이 어떠한 값을 전달해준다는 부분에선 비슷하다고 할 수 있습니다. 그럼 Context API 를 왜 사용하는걸까? > Context API 의 데이터 전달 방식 중 핵심은 필요한 컴포넌트에서 직접 접근해 값을 가져올 수 있다 라는 것 입니다. ...

리덕스는 기본적으로 동기적인 작업을 수행하는데 중점을 두고 있습니다. 동기적인 작업은 간단하고 직관적이며 상태 변화에 있어서 순차적으로 실행되기 때문에 상태 변화를 추적하기가 쉽습니다. > 또한 리덕스를 사용하는 이유 중 하나이자 큰 장점은 리듀서에 의한 멱등성입니다. 멱등성은 동일한 입력에 있어서 항상 동일한 출력을 하는 성질을 말합니다. 그럼 동일...