본문 바로가기

React Hooks3

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 공부 - 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.
리액트 공부 - 1일차 소문자로 시작한다 - html 태그 대문자로 시작한다 - Component JS 파일에서 JSX (JS + XML)를 쓰기위해선 babel 을 써야한다 JSX 에서 단일 태그는 항상 닫아 주어야 한다. state - 변할 수 있는 값이나 변하게 될 여지가 있는 값 ( 컴포넌트 ) state 변경 시킬 때는 항상 setState() 메소드 이용 ex) input 태그의 value 값이 state인 경우에 onChange 이벤트를 이용, 리턴 값으로 setState() 메소드를 이용해 변경해 주어야 한다. this.setState({ value: e.target.value})} /> 내가 만든 클래스 메소드는 화살표 함수를 쓰자. 일반 함수를 사용하려면 this.function = this.function... 2021. 2. 19.

티스토리툴바