React (9) 썸네일형 리스트형 화살표 함수 사용하기 ES6에서 추가된 화살표 함수는 'function'대산 '=>'를 사용하며 'return'을 생략할 수도 있다. 따라서 기존 'function'보다 간략하게 선언이 가능하며, 콜백 함수에서 this를 bind 해야 하는 문제도 발생하지 않는다. 화살표 함수에 대해 알아보기 위해 FunctionCom.js파일을 하나 만들고 App.js에 FunctionCom을 import 시켰다. 1. 기존 Function 기존에 Function은 다음과 같이 사용한다. import { Component } from "react"; class FunctionCom extends Component{ constructor(props){ super(props); this.state = { arrowFunction: '화살표',.. React 전개 연산자 전개 연산자는 배열이나 객체 변수를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법으로 변수 앞에... 를 입력해 사용한다. 먼저 배열을 확인하기 위해 import { Component } from "react"; class Component2 extends Component { render(){ return( ) } } export default Component2; Component2.js 파일을 만들어주고 import './App.css'; import Component1 from './component/Component1'; import Component2 from './component/Component2'; function App() { return ( 안녕하세요. 메인페이지.. React 생명주기 함수 '변경' React 생명주기 함수 '변경'과정에 속하는 함수는 shouldComponentUpdate()로 여기서 '변경'이란 props나 state의 변경을 말한다. shouldComponentUpdate() 함수의 실행을 확인해 보기 위해 다음과 같이 코드를 수정해 보자. import React, {Component} from 'react'; class Component1 extends Component{ static getDerivedStateFromProps(props, state){ console.log('2번'+props.value+'실행'); return {sValue:props.value, eValue:'중간 두번째'}; } constructor(props){ super(props); this.st.. 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 구조로 이루어져야한다는 규칙이 존재해 부모요소가 필요하다.. React의 구조 React 설치 후 기본 폴더트리를 간단하게 살펴보자면 다음과 같다. 1. node_modules : React에 필요한 모듈들이 위치하는 폴더 2. public : static 파일들이 저장된 폴더 1) favicon.ico : 브라우저 상단 탭에 나타나는 페이지 아이콘 2) index.html : title, meta 등 페이지에 대한 기본 정보 3) manifest.json : PWA에 필수로 포함되는 파일 4) robots.txt : 웹 크롤러 같은 로봇의 접글을 제어하는 규약 3. src : React를 작업할 폴더 1). css : 컴포넌트들에 대한 css파일 2) App.js : CRA가 기본 제공하는 예제 파일 3) index.js : App.js에 있는 컴포넌트들을 index.html과 .. React 개발 환경 준비하기 지난번엔 React에 대해 알아보았으니 이번엔 React 설치하는 방법과 개발 환경 준비를 해보자 React는 앞서 이야기 한것처럼 자바스크립트 라이브러리이기 때문에 자바스크립트 패키지 관리 도구를 통해 다운받아야한다. 자바스크립트 패키지 관리 도구에는 크게 3가지가 있는데 npm과 yarn 그리고 pnpm이 대표적이다. 1. 자바스크립트 패키지 관리 도구(Javascript Package Manager) 자바스크립트 패키지 매니저라고도 불리며 개발에 필요한 패키지 설치, 수정, 삭제, 업데이트를 쉽고 편리하게 도와주는 도구다. 대표적으로 npm, yarn이 있고 국내에는 잘 알려져있지 않지만 pnpm도 존재한다. 1) npm npm은 Node.js의 기본 패키지 관리 도구로 가장 많이 사용하고 있으며 .. React React는 페이스북에서 개발된 오픈소스 JavaScript 라이브러리로, 사용자 인터페이스를 만들기 위해 사용되며, 단일 페이지 애플리케이션(Single Page Application, SPA)을 구축하는 데 가장 많이 사용되고 있다. 그리고 가상 DOM을 기반으로 한 선언적이고 효율적인 컴포넌트 기반 아키텍처를 갖추고 있으며 이러한 특징으로 Angular, Vue와 함께 프론트엔드 개발 시 많이 채택되어 사용되고 있으며, 그중에서도 React가 가장 많이 사용되고 있다. React의 주요 특징 1. 컴포넌트 기반 아키텍처 : React는 재사용 가능한 UI 컴포넌트를 작성하는 데 중점을 둬 코드의 가독성과 유지보수성을 높여주며 개발 생산성을 향상시킨다. 2. 가상 DOM (Virtual DOM) : .. 이전 1 다음
