React 3

[React] 리액트 라이프사이클 (React LifeCycle) 쉽게 이해하기

리액트의 라이프 사이클 단계 Mounting - Updating - Unmounting Mount 단계 : DOM에 올라갈 때 counstructor : 컴포넌트가 브라우저에 나타나기 전에 호출되는 api render()함수 전에 호출되는 라이프사이클 함수 컴포넌트 생성자 함수 , 컴포넌트가 새로 만들어질 때마다 이 함수가 호출됨. constructor(props){ super(props); } componentDidMount : 컴포넌트가 브라우저에 나타나게 됐을 때 호출시 - DOM을 사용해야하는 외부라이브러리 연동시 - DOM의 속성을 읽거나 직접 변경하는 작업시 - 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios,fetch 등을 통하여 ajax 요청시 componentDidMount..

React 2021.03.05

[React] React로 만든 Counter 소스 뜯어보기 - Counter.js

1. state : 컴포넌트가 가지고 있는 상태값 데이터를 가지고 있는 객체이다. 클래스형 컴포넌트를 작성할 때는 클래스 내부 맨 위에 작성 변경된 데이터를 관리한다. (코드설명) > Counter 클래스를 컴포넌트화 시킨다. > Counter 클래스의 현재 상태값은 number:0 2. 애로우 함수 (Arrow Function) : function 키워드 대신 " => " 를 사용하여 함수를 선언 예시) ( 파라미터 ) => { return 내용 } 3. this 키워드 : 일반적으로 부모를 가리킨다. 4. setState()함수 : state값을 바꿀때 쓴다 state값을 직접 바꾸면 인식하지 못해서 다시 렌더링 하지 않음 (..

React 2021.03.04

[React] React로 만든 Counter 소스 뜯어보기 - App.js

1. import ~ from ~ : 특정한 파일, 설정, 컴포넌트를 외부파일이나 모듈에서 가져올 때 사용한다. (코드 설명) > react.js 에서 React 코드, 컴포넌트 객체?변수?를 가져온다. > Counter.js 에서 Counter 코드를 가져온다?? (정확한 의미가 뭔지 아직 모르겠다) 2. Component 란 ? : 기능을 단위별로 캡슐화하는 리액트의 기본 단위 ? 사용자가 보는 화면은 이 컴포넌트들을 조합해서 만들어진 것 함수형 컴포넌트, 클래스형 컴포넌트가 있다 (아직 공부를 안해서 그런지 설명이 다 두루뭉실하게 느껴짐) 3. render() 함수 : UI에 표시할 DOM tree(React element)를 반..

React 2021.03.03