리액트를 다루는 기술
-
[리액트를 다루는 기술] 3장. 컴포넌트맨땅에코딩/react 2020. 9. 14. 20:49
템플릿 이상의 컴포넌트의 기능! 데이터에 맞춰 UI를 생성합니다. 라이프사이클 API를 이용하여 컴포넌트가 화면에 나타날 때,사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있습니다. 임의 메서드를 생성하여 특별한 기능을 덧붙일 수 있습니다. 클래스형 컴포넌트 : 함수형 컴포넌트와 달리 state 및 라이프사이클 기능을 사용할 수 있고 임의 메서드를 정의 할 수 있습니다. [ 알아둘것!) 리액트 v16.8 업데이트 이후 Hooks 의 도입으로 state와 라이프사이클 API를 다른 방식으로 사용할 수 있게되었습니다. ] 예시) //rcc import React, { Component } from 'react'; class temp extends Component { render() { retur..
-
[리액트를 다루는 기술] 2장 JSX맨땅에코딩/react 2020. 9. 11. 15:34
코드 이해하기 리액트 프로젝트 생성시 node_modules 디렉터리도 함께 생성되는데 이 디렉터리 안에 react 모듈이 함께 생성됩니다. import React from 'react' 구문을 통해서 리액트를 불러와 사용가능하다. [알아둘것 !] 이렇게 모듈을 불러와 사용하는 것은 원래 브라우저에 없던 기능, Node.js 에서 지원하는 기능입니다. ( Node.js에서는 import X > require Yes! ) >> 이러한 기능을 브라우저에서도 사용하기위해 번들러(bundler) 를 사용합니다. [번들러?] 파일을 묶듯이 연결하는 것, 대표적인 번들러 : 웹팩, Parcel, browserify 각 도구마다 특성이 다르다. 리액트 프로젝트에서는 편의성과 확장성이 더 뛰어난 "웹팩" 을 주로 사용..
-
[리액트를 다루는 기술] 1장 리액트 시작맨땅에코딩/react 2020. 8. 20. 23:10
안녕하세요 리액트 공부를 본격적으로 해보고자 도서를 검색하던 도중 react 강의로 유명하신 veloper 님의 저서 [리액트를 다루는 기술] 을 구매하게되었습니다. 오늘부터 시작해서 차근차근히 책의 내용을 정리하고자 합니다. 화이팅 1. 시작 1.1 리액트 이해 리액트는 MVC, MVW 등인 프레임워크와 달리 오직 V (view) 를 중요시하는 라이브러리. * 컴포넌트 : 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체 ( 다른 프레임워크의 컴포넌트와 다른 의미) - 재사용 가능한 API로 수많은 기능들 내장 - 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식 정의 * 렌더링 : 사용자 화면에 뷰를 보여주는 것 ? 리액트 라이브러리는 어떻게 렌더링하길래 데이터 변경시마다 새롭게 리렌더..