이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 목차 1. What is Component? 2. Stateless Functional Component / Class Component 3. Create Component (ES6) 4. State 1. What is Component? 리액트로 만든 앱을 구성하는 최소단위. 비록 자바스크립트로 만든 Todolist지만 이걸 리액트로 만들고자 한다면 컴포넌트를 어떻게 구성할 수 있을까 실시간으로 시간을 보여주는 TodoTitle, 새로운 항목을 추가한 TodoInput, 할 일을 보여줄 TodoList 등의 여러가지 요소들로 나눌 수 있다. 각각의 컴포넌트는 단순히 템플릿의 기능으로 끝나지 않는다. props와 state에 따..

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 목차 1. 리액트 파일 구조 2. What is JSX? 3. JSX 문법 1. 리액트 파일 구조 본격적으로 시작하기 전에 리액트를 처음 설치하면 생소한 것들이 엄청 많다. create-react-app 명령어를 bash에 쳐서 아무 앱이나 하나 생성해보자 여기서 App.js를 확인해보면 이렇게 코드가 작성되어 있다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 처음에 코드를 봤을 때, '이런 느낌이겠구나~'..

이렇게 빨리 리액트 포스팅을 하게 될 줄이야. 순서는 "리액트를 다루는 기술 - 김민준"을 따라서 진행할 것이다. 목차 1. JS의 한계 2. What is React? 3. Virtual DOM & Fiber 1. JS의 한계 Frontend의 시작은 HTML/CSS에 JavaScript를 곁들인 정도에 불과했다. 예전엔 정적인 페이지에 동적인 장치나 연산을 수행하는 단순 스크립트로 취급되었었다면, 현재는 JavaScript를 빼놓고는 프론트 엔드를 논할 수가 없게 되었다. (반쪽자리 언어 취급은 여전히 바뀌지 않았다. 흑흑) 하지만 점점 웹 서비스 플랫폼의 규모가 방대해질 수록 JS로 모든 기능을 처리하는 것에 한계가 오기 시작했다. JQuery도 요새는 사용하지 않는 추세인 걸 감안하면, 결과적으로..