본문 바로가기

React7

React 공부 - Hooks의 LifeCycle ( useEffect) React Hooks Component에는 LifeCycle이 존재하지는 않지만, 흉내 낼수 있다. 그것이 useEffect이다. useEffect(()=>{ // componentDidMount, componentDidUpdate 역할 (1대1 대응은 아님) interval.current = setInterval(changeHand,100); // 반복할 함수 interval은 Ref return () => { clearInterval(interval.current)} // componentWillUnmount 역할 }, [변경될 state]); // 두번째 인수가 클로저 문제 해결해주는 역할 만약, 변경될 state에 아무것도 넣지 않는다면 처음 실행되고 다시 실행되지 않는다. 두번째 인자에 아무것도.. 2021. 3. 5.
React 공부 - 6일차 React LifeCycle 순서 class -> constructor -> render -> ref -> componentDidMount (setState/props 바뀔 때) -> shouldComponentUpdate(true) -> render -> componentDidUpdate() 부모가 자식 컴포넌트 없앴을 때 -> componentWillUnmount() -> 소멸 react가 dom 에 표시할 때 특정한 동작을 할 수 있음 render 가 처음 성공적으로 실행 됬다면 componentDidMount 실행 됨. setState같은 것으로로 리렌더링 일어날 때는 componentDidMonut 실행 안됨 componentDidMount() { } 컴포넌트 첫 렌더링 된 후 -> 비동기 요청.. 2021. 3. 1.
React 공부 - 4일차 (성능 개선) 렌더링이 될 때, state 나 props 변경되었을 때 렌더링 된다. 렌더링 되는 것을 확인하려면 , React Developer Tools을 다운로드하면 된다. 다운로드하고, F12를 눌러 개발자 환경에 들어가 화살표 표시를 클릭하면, Components 탭과 Profiler 탭이 생긴다. Components 탭에 들어가면 위와 같이, Component , props, state, 사용하는 react 버전을 확인할 수 있다. 빨간 동그라미가 쳐진 톱니바퀴를 클릭해, 설정으로 들어간다. 그럼 이렇게, 컴포넌트가 렌더링 됐을 때, 강조 표시를 주는 설정이 있다. 이걸 체크하고 , 설정 탭을 닫는다. import React, { Component } from 'react' class RenderTest e.. 2021. 2. 28.
리액트 공부 3일차 - 2 import vs require require - node의 module 시스템 파일에서 module.exports에 넣어주면, 다른 파일에서 require 해서 불러올수 있다. import { Component } from 'react' ; export const hello = 'hello'; // import { hello } 변수명 다르면 개수 상관 X export default number; // import number; defalut는 한번만 불러 올 수 있음. // module.exports != export default 두개는 다른 것이긴 한데, React에서는 호환된다고 생각해도 무방 react에서는 import, export 씀 node에서는 require 씀 node에서는 impor.. 2021. 2. 23.

티스토리툴바