728x90 반응형 SMALL 기술 개발74 React Hooks (useReducer) useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. Redux를 사용해봤다면 알기 쉽다. const [state, dispatch] = useReducer(reducer, initialArg); (state, action) => newState의 형태로 reducer를 받고, dispatch 메서드와 짝의 형태로 현재 state를 반환한다. 다수의 하윗값을 포함하는 복잡한 로직을 만들거나 다음 state가 이전 state에 의존적인 경우, 보통 useState보다 useReducer를 선호한다. 또한 useReducer는 콜백 대신 dispatch를 전달할 수 있기 때문에, 자세한 업데이트를 트리거하는 컴포넌.. 2023. 1. 5. 컴포넌트의 라이프사이클 메서드 리액트 컴포넌트에는 라이프사이클(Lifecycle)이 있다. 클래스형 컴포넌트에서만 라이프사이클 메서드를 사용할 수 있다. 라이프 사이클은 마운트, 업데이트, 언마운트 세 가지로 나눈다. 마운트(Mounting) DOM이 생성되고 웹 브라우저상에 나타나는 것 업데이트(Updating) 1. props가 바뀔 때 2. state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. this.forceUpdate로 강제로 렌더링을 트리거할 때 이 네가지 경우에 컴포넌트를 업데이트한다. 언마운트(Unmounting) 컴포넌트를 DOM에서 제거하는 것 라이프사이클 메서드 마운트 - constructor: 컴포넌트 생성자 메서드, 초기 state 정할 수 있음 - getDerivedStateFromProps: pr.. 2023. 1. 4. 타입스크립트의 기본 타입 자바스크립트 언어의 타입은 원시 값과 객체로 나뉜다. 원시값 (Number, String, Boolean, Undefined, Null, BigInt, Symbol) 객체 (Functuon, Array...) 자바스크립트 원시 값을 기준으로, 특수한 상황이 아니면 잘 사용하지 않는 symbol과 bigint를 제외하고 number, string, boolean, undefined, null 타입을 정리했다. 숫자(Number) // number const num: number = -6; 문자열(String) // string const str: string = 'hello world'; 불리언(Boolean) // boolean const bool: boolean = true; Undefined - 값이.. 2022. 12. 19. 상태관리 라이브러리 비교(Redux/MobX/Recoil) 리액트는 뷰나 앵귤러와 비교했을 때 가장 큰 차이점이 단방향 바인딩이다. 부모 컴포넌트에서 자식 컴포넌트로만 state를 props로 전달할 수 있으며, 자식 컴포넌트에서 부모 컴포넌트로 props를 직접 전달할 수 없다는 것이다. 자식 컴포넌트에서 부모 컴포넌트에 있는 state를 변경하려면 setState를 props로 넘겨줘야 하는데, 이것이 반복되면 Props Drilling이 발생하게 되며 프로젝트 규모가 커질수록 props의 depth가 증가하게 된다. 이렇게 되면, 불필요한 리렌더링이 발생하는 등 비효율적이다. 따라서, 리액트 props로만 state 관리를 하지 않고, 상태관리 라이브러리도 사용할 필요가 있다. 대표적인 상태관리 라이브러리 - Redux, MobX, Recoil 1. Red.. 2022. 12. 16. 타입스크립트를 쓰는 이유 타입스크립트(TypeScript)는 2012년 마이크로소프트가 발표했으며, 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어다. 타입스크립트의 특징 1. 컴파일 언어, 정적 타입 언어 자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 반대로 타입스크립트는 정적 타입의 컴파일 언어이며, 타입스크립트 컴파일러나 바벨(Babel)을 통해 자바스크립트 코드로 변환 할 수 있다. 코드 작성 단계에서 타입을 체크해 오류를 확인 할 수 있으며, 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다. 하지만, 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며, 컴파일 시간이 오래 걸린다는 단점이 있다. 2. 자바스.. 2022. 12. 16. React에서 상태관리를 왜 할까? 상태(state)란? 상태관리를 왜 하는지 알아보기전, 상태가 무엇인지 알고 있어야 한다. 오늘날 웹 어플리케이션에서 상태는 동적이면서, 렌더링에 영향을 주는 값이라고 할 수 있다. 리액트 공식 문서 참고 Plain Javascript Object hold information influences the output of render 리액트는 그 자체 만으로도 상태를 관리할 수 있는 수단을 제공한다. 예를 들어서, useState, useReducer, Context API 등 그래서 서드 파티 라이브러리(제 3자 라이브러리)를 도입해서 상태를 관리할 때는, 라이브러리가 쓰여야하는 명확한 이유와 그 쓰임새에 대해 생각해보아야한다. 상태관리를 왜 할까? 리액트는 가상돔을 이용한다. 컴포넌트가 변화할 때 리.. 2022. 10. 18. 이전 1 2 3 4 5 6 7 8 ··· 13 다음 728x90 반응형 LIST
