본문 바로가기

개인공부/React9

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 공부 - 5일차 부모로부터 받은 props는 자식에서 바꾸면 안 됨 props.hi = 'hello'; 이런 식으로 바꾸면 안 됨. props를 바꿀 경우가 있는데, props를 바꿀 경우에는 state로 만든 뒤에 그 state를 변경한다 Ex) const [hi, setHi] = useState(props.hi); setHi('hello'); props를 자식이 바꿔버리면 부모가 물려준 것도 바뀌어야 하는데, 자식이 부모 꺼를 바꿔버리면 뜻하지 않게 바뀌어버림 함수로 하는 경우에는 정밀한 동작이 필요한 경우 기본 객체로는 안 되는 동작들이 있을 때, ex) constructor , ref 함수, setState 함수 A component -> B component -> C component 부모 - 자식 - 자손 p.. 2021. 2. 28.
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.

티스토리툴바