리액트 컴포넌트에 대하여 조금 더 자세히 알아봅시다! 컴포넌트 파일 파헤치기 이전에 만든 hello-react 프로젝트를 열어보세요. 다음과 같이 프로젝트가 구성되어 있을 것입니다. 리액트를 사용하면 여러분의 웹 애플리케이션에서 사용하는 유저 인터페이스를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수성을 우수하게 해줍니다. 여기서 컴포넌트에 해당하는 코드는, App.js 에서 확인해볼 수 있습니다. 한번 열어보세요. import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( Welcome ..

리액트 프로젝트는 보통 우리가 옛날에 jQuery 같은것을 단순히 의 형태로 불러와서 사용했던 것 처럼 사용하지는 않습니다. 그렇게 하려면 할 수 는 있는데 굉장히 제한적입니다. 그 대신에, 리액트 프로젝트를 제대로 작업 하려면 여러분의 컴퓨터에 Node, yarn, Webpack, Babel 등의 도구를 설치하여 프로젝트를 설정해주어야 합니다. 리액트 프로젝트를 바닥부터 설정하는 것은 초심자에겐 꽤나 복잡한 작업입니다. 다행히도, 페이스북에서 제공해주는 도구create-react-app를 통하여 이 작업을 간단하게 준비해줄 수 있답니다. Webpack, Babel 은 무슨 용도인가요? 리액트 프로젝트를 만들게 되면서, 컴포넌트 를 여러가지 파일로 분리해서 저장 할 것이고, 또 이 컴포넌트는 일반 자바스..

아래는 이번 강의의 대시보드가 작성된 주소이다. https://velopert.com/3613 누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG 이 튜토리얼은 리액트를 1도 모르는 사람들을 위해 작성되었습니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행하고 나면 리액트가 무 velopert.com

1. DOM(Document Object Model) 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다. DOM은 애플리케이션의 전체 UI를 나타내며 트리 데이터 구조로 표현된다. 여기에는 Web Document에 있는 각 UI 요소에 대한 노드가 포함된다. 웹 개발자가 JavaScript를 통해 콘텐츠를 수정할 수 있기 때문에 매우 유용하다. 또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고, 모든 코드 작업이 훨씬 쉬워지기 때문에 많은 도움이 된다. 2. DOM의 문제점 DOM은 트리 구조로 되어 있어서 이해하기 쉽지만, 노드의 수가 많아질 수록 속도가 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다. 또한, 최근 모던 웹은 SPA(Single Page Ap..

개요 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때끝난다. 컴포넌트를 처음으로 렌더링 할 때, 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다. 이러한 경우들에 컴포넌트의 라이프사이클 메서드를 사용한다. 라이프사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있다. ( 함수형 컴포넌트에서는 Hooks 기능을 사용해서 비슷한 기능을 처리하는데, 여기서는 다루지 않겠다. ) 본론 라이프사이클 메서드 이해 라이프사이클 메서드 종류는 총 9가지이다. will 접두사가 붙은 메서드 👉 어떤 작업을 작동하기 전에 실행 Did 접두사가..

https://ko.reactjs.org/docs/hooks-effect.html 1. useReducer 훅이란? - useState를 대체할 수 있는 함수이다. - React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 state이다. - 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용할 수 있다. ( 콜백대신 dispatch를 전달할 수 있기 때문이라고 볼 수 있는데, 이 부분은 이후 확인해 보자. ) - reducer는 이전 상태와 Action을 합쳐, 새로운 state를 만드는 조작을 말한다. ※ useReducer를 사용하기 위한 구성요소들은 다음과 같다. 1. useReducer 함수 import React, { useReducer } from "rea..