🐶🦶 BLOG

3. 엘리먼트 렌더링 엘리먼트 React 앱의 가장 작은 단위 일반 객체 React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 불변 객체, 엘리먼트 생성 이후 해당 엘리먼트의 자식이나 속성 변경 불가 특정 시점의 UI를 보여줌 DOM에 엘리먼트 렌더링하기 루트 DOM 노드 index.html 파일 안의 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리 리액트 앱은 일반적으로 하나의 루트 돔 노드가 있음 리액트를 기존 앱에 통합하려는 경우 여러개의 루트 돔 노드가 있을 수 있음 index.js 파일 안의 const element = Hello, World; ReactDOM.render(element, document.getElementById('root')); React 앨리먼트..

이 글은 누구든지 하는 리액트 [www.youtube.com/playlist?list=PL9FpF_z-xR_E4rxYMMZx5cOpwaiwCzWUH]을 참고하여 작성하였습니다. 프론트앤드 라이브러리 : React, Angular, Vue 등 MVC, MVVM, MVW 등을 사용하던 기존 웹 프레임워크/라이브러리 공통점 : Model (양방향 바인딩) 변화(Mutation) 그냥 mutation을 하지 말고, 데이터가 바뀌면 뷰를 날려버리고 새로 만들자! Virtual DOM : 가상의 돔에 렌더링을 하고 기존의 돔을 비교한 후, 정말 변화가 필요한 곳에만 업데이트 해줌 Webpack 코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러개의 파일로 결과물을 만들어냄 -> 'bundling작업' 이라고 함 ..

이 글은 생활코딩 React 강의[opentutorials.org/module/4058]를 참고하여 작성하였습니다. [State란?] Component : 사용자가 컴포넌트를 사용하는 입장에서 중요 Props : 컴포넌트의 속성, 사용자에게 중요, 외부 State : props의 값에 따라 내부 구현에 필요한 데이터 => props와 state를 철저히 분리! [State 사용] Original import React, { Component } from 'react'; import './App.css'; import TOC from "./components/TOC"; import Content from "./components/Content"; import Subject from "./components..

이 글은 생활코딩 React 강의[opentutorials.org/module/4058]를 참고하여 작성하였습니다. [Refactoring 하는 법 - props 사용] 리팩토링이란? 외부동작을 바꾸지 않으면서 내부 구조를 개선하는 방법 Original import React, { Component } from 'react'; import './App.css'; class Subject extends Component { render() { return ( WEB world wide web! ); } } class App extends Component { render() { return ( ); } } export default App; props 추가한 class Subject extends Comp..

이 글은 생활코딩 React 강의[opentutorials.org/module/4058]를 참고하여 작성하였습니다. [Component 만들기] html -> js Original WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. Component로 바꾼 import React, { Component } from 'react'; import './App.css'; class Subject extends Component { render() { return ( WEB world wide web! ); } } class TOC extends Component { render() { return ( HTML CSS J..