전체 글 (33) 썸네일형 리스트형 React 생명주기 함수 '생성' React에서 생명주기란, component의 생성, 변경, 소멸 과정을 뜻한다. 그중 render(), constructor(), getDerivedStateFormProps(), componentDidMount() 함수들은 '생성'에 속하며 사용방법은 다음과 같다. 1. render() render()는 return 되는 html 형식의 코드를 화면에 그려주는 함수로 다음과 같이 사용할 수 있다. import React, {Component} from 'react'; class Component1 extends Component{ render(){ return( [component1 입니다] ) } } export default Component1; 위와 같이 적용하면 component1을 사용하는 .. React Component 사용하기 1. component란 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위를 말하며 component를 파일 단위로 작성 후 필요한 위치에 import 후 사용할 수 있다. 2. component 만들기 1) component를 만들기 위해 component들을 관리할 component폴더를 src 폴더 안에 먼저 만들어주자. 2) component폴더 안에 Component1.js 파일을 생성해 주고 3) 파일 안에 다음과 같이 코드를 작성해 준다. import React, {Component} from 'react'; class Component1 extends Component{ render(){ return( [component1 입니다] ) } } export d.. React 메인 바꿔보기 1. JSX React를 처음 설치하고 App.js에 들어가 보면 보이는 코드로 JSX(Javascript Syntax eXtension)으로 작성된것을 볼 수 있다. JSX는 React로 프로젝트를 진행할때만 사용되므로 공식적인 Javascript 문법은 아니며, Javascript와 html을 동시에 작성해 편리하며, 브라우저에 실행될 때 바벨을 사용 해 일반 자바스크립트 형태의 코드로 변환된다. 그 외 가장 큰 특징 2개를 더 알아보자면 1) 요소가 하나 이상이면, 반드시 부모 요소가 존재해야한다. Virtual DOM을 사용하는 React 특성 상 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM Tree 구조로 이루어져야한다는 규칙이 존재해 부모요소가 필요하다.. 이전 1 ··· 5 6 7 8 9 10 11 다음
