REACT

컴포넌트/UI를 상태별로 확인 할 수 있는 라이브러리. react뿐만아닌 다른 프레임워크에서도 지원된다!이런거 굳이 알아야 되나? 했지만 막상 간단한 실습만으로도 왜쓰는지 알것 같다.컴포넌트 수정할때마다 UI가 정삭 작동 하는지 서버켜고 확인하고 코드 수정하고 반복 하

목차 함수형 & 클래스형 컴포넌트 hook의 특징 hook 사용법 useState() useEffect() props 전달 ContextAPI 사용하기 함수형 & 클래스형의 사용차이 useContext() 함수형 & 클래스형 컴포넌트 리액트에서

useState는 길이 2짜리 배열 반환 : 값, 그리고 값을 변경할수 있는 함수배열 구조분해 할당(Destructuring) 사용하여 배열 분리하여 사용인자로 초기값 전달, 해당 값 초기화 기능 있을 경우, 초기값 변수 사용 추천!클래스형 컴포넌트에서는 state객체

네트워크 리퀘스트(GET,POST,DEL..)DOM 수동 조작로깅정리(clean up) : 타이머함수(인터벌같은)제거, 이벤트리스너 제거useEffect(CB) : componentDidMount(), componentDidUpdate()useEffect(CB,\[])

react 공식문서 Context 살펴보기컨텍스트는 여러게를 만들수 있다(다중스토어)React.createContext에서 반환값으로 <컴포넌트.Provider>로 최상위 컴포넌트를 감싼다.생성 컨텍스트컴포넌트는 export 하여 <컴포넌트.Consumer>

codevolution-useContext+useReducer최상위 루트 컴포넌트useReducer로 상태관리할 state, dispatch 생성export Context = React.createContext() 로 context 생성<Context.Provid

참고 : 리액트 공식문서 고차 컴포넌트(higher-order-component)책 : 실전 리액트 프로그래밍/이재승 저: 아래 작성된 예제 코드고차 컴포넌트(HOC, higher-order-componentm), 이하 HOC로 통일HOC는 컴포넌트를 인자로 받아 새로

MDN 데이터 세트(dataset)데이터 세트는 HTML 표준에 정의된 기능DOM요소에 값을 저장, JS 코드로 값을 읽어들일 수 있음html 사용법 : data-를 시작으로 data-이름을-지정하면-된다와 같이 tag element에 속성으로 사용 : <p da

성능 최적화를 고민하기전 일단 편하게 코딩 먼저 하자! 성능 이슈가 생기면 그때 고민해도 늦지 않는다!리액트에서 가장많은 cpu를 사용하는 것은 렌더링이며, 렌더링을 효율적으로 하는 것은 성능 최적화에 큰 영향을 준다. 렌더링 될 때 = state, props가 변경되

React에서 기본으로 제공하는 useState, useEffect 등의 훅을 사용해 새로운 훅을 만들어낸다.창의 너비를 알려주는 훅컴포넌트의 마운트 여부를 알려주는 훅(HOC보다 훨씬 간결하게 사용가능하며, 타입스크립트와의 호환도 좋다!)훅의 호출 순서는 동일해야 한

클래스형 컴포넌트에서 createRef()를 hooks에서는 useRef()로 사용한다.컴포넌트가 마운트 되고 DOM 요소에 접근 가능해 졌을 때DOM 요소에 포커스(focus), 외부 요소 클릭 이벤트(out-side-click-event) 적용할 때렌더링과 무관한

메모이제이션(memoizaition) \- 컴퓨터 프로그램이 같은 계산을 반복할 때, 이전 계산값을 메모리에 저장하여 반복수행 제거, 실행속도를 빠르게 하는 기술 \- React.memo()사용. (ToastUI - React.memo() 현명하게 사용하기)

리액트 공식문서 - useImperativeHandle(https://ko.reactjs.org/docs/hooks-reference.html자식컴포넌트의 메서드 호출할 수 있도록 한다.forwardRef() 와 함께 사용한다.부모 컴포넌트에서 입력한 ref객

useEffect() 는 비동기useLayoutEffect() 는 동기useLayoutEffect() 훅의 로직에서 연산이 많으면 브라우저가 먹통이 될 수 있으니 주의!앵간하면 useEffect() 사용하고, 렌더링 직후 돔요소의 값을 읽는 경우 useLayoutEff

componentDidMount() 보다 먼저, 최초 1회만 실행되어야 한다.useEffect로 componentDidMount() 구현하기(https://velog.io/@hwang-eunji/React-Hooks-3-useEffect\[useEffect로

기존 클래스형 컴포넌트에서 커스텀 훅을 사용할 수 있는 방법고차 컴포넌트(이하 HOC) or 랜더 속성값(render-props) 를 사용하여 클래스형 컴포넌트에서 커스텀 훅 사용참고 : 책 : 실전 리액트 프로그래밍/이재승 저