기본개념3 [JavaScrpit, react, redux]

reducer란
현재 state와 action객체를 파라미터로 받아와서 새로운 state를 반환해주는 함수이다

reduer룰
-They should only calculate the new state value based on the state and acton arguments
리듀서는 현재 state와 action 파라미터로 받아서 새로운 state를 반환한다.
-They are not allowed to modify the existing state. Instead, they must make immutable updates, by copying the existing state and making changes to the coped values.
기존의 state를 수정할 수 없다. 대신 기존의 state를 복사하고, 새로 만든 state로 변경하여 불변의 상태로 업데이트한다.
-They must not do any asynchronous logic or other "side effects"
비동기 로직 또는 side effects를 실행해서는 안된다.

useDispatch()란?
Redux Store에서 디스패치 함수에 대한 참조를 반환한다. 필요에 따라 action 발송하는데 사용한다. 하위 구성 요소에 디스패치를 사용해서 콜백을 전달 할 때, useCallback을 사용하여 콜백을 메모하는 경우가 있다. 하위 구성 요소가 React.memo() 등을 사용하여 렌더 동작을 최적화하려는 경우 변경된 콜백 참조로 인해 하위 구성 요소의 불필요한 렌더링을 방지할 수 있다.

JSX란?
HTML처럼 보이는 코드를 작성할 수 있게 해주는 자바스크립트 문법의 확장이다. JSX는 자바스크립트 함수 호출 방식으로 컴파일 되어 컴포넌트에 대한 마크업을 만들 수 있는 더 좋은 방법을 제공한다.

클래스 컴포넌트와 함수형 컴포넌트의 차이는?
리액트 16.8(hooks 도입)이전에는 내부 state를 유지하는데 필요한 컴포넌트를 생성하거나 생명주기 메소드(Lift methods인 componentDidMount 및 shouldComponentUpdate)를 활용하기 위해 클래스 기반 컴포넌트를 사용했다.

클래스 기반 컴포넌트는 리액트의 component 클래스를 확장하는 ES6 클래스이다. 최소한 render()메소드를 포함해야 한다.

Hook 도입 이전의 함수형 컴포넌트는 state를 갖지 않으며 렌더링할 출력 결과를 리턴한다. 함수형 컴포넌트는 클래스 기반 컴포넌트보다 심플하기 때문에 props에만 의존하는 UI을 렌더링 하는데 선호됬다.

하지만 리액트 16.8버전 hooks 도입 이후에는 차이가 거의 없어졌다.

고차함수란
고차함수는 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다.
고차함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다.
자바스크립트의 함수는 일급 객체이므로 값처럼 인자로 전달할 수 있으며 반환할 수도 있다.

베타존 : 네이버쇼핑 스마트스토어