🐶🦶 BLOG

📌 State Hook 다음은 버튼을 클릭하면 값이 1씩 증가하는 간단한 카운터 예시 코드이다. import React, {useState} from 'react'; function MyComponent() { // "count"라는 새 상태 변수 선언 const[count, setCount] = useState(0); return ( You click {count} times setCount(count + 1)}> Click me ); } export default MyComponent; 여기서 사용한 useState가 훅(Hook)이다. hook을 호출해 함수 컴포넌트 안에 state 추가 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지 useState 특징 현재의 state값과 이 값을 ..

이전 내용 복습 [WEB] - [React] 공식 문서 3. 엘리먼트 렌더링 [React] 공식 문서 3. 엘리먼트 렌더링 3. 엘리먼트 렌더링 엘리먼트 React 앱의 가장 작은 단위 일반 객체 React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 불변 객체, 엘리먼트 생성 이후 해당 엘리먼트의 자식이나 속성 변경 불가 nakyungim.tistory.com UI를 업데이트 하는 한 가지 방법 새로운 엘리먼트를 생성 후 이를 ReactDOM.render()로 전달 렌더링 된 출력값을 변경하기 위해 ReactDOM.render() 호출 5. State와 생명주기 목표 : 1. Clock 컴포넌트를 완전히 재사용하고 캡슐화 하기 2. 컴포넌트가 스스로 타이머 설정 and 매초 스스로 업데이..

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..