🐶🦶 BLOG

이 글은 생활코딩 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..

이 글은 생활코딩 React 강의[opentutorials.org/module/4058]를 참고하여 작성하였습니다. [Component] Top.html Sidebar.html 과 같은 html 파일을 만들고, index.html에서 과 같이 태그처럼 사용할 때, 사용자 정의 태그라고 하지 않고 Component 라고 한다. 장점 1. 가독성 2. 재사용성 3. 유지보수 [React 공식문서] https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org [주의] cmd에서 드라이브 이동이 안될 때 윈도우라면 cmd에서 드라이브를 이동할 때 ..