공부하는 블로그 ✍️

벨로퍼트와 함께하는 모던 리액트 벨로퍼트와 함께하는 모던 리액트: https://react.vlpt.us/ 진도 - 1.5. props 를 통해 컴포넌트에게 값 전달하기 💬 props 를 통해 컴포넌트에게 값 전달하기 props 의 기본 사용법 // Hello.js import React from 'react'; function Hello(props){ return 안녕하세요 {props.name} } export default Hello; // App.js import React from 'react'; import Hello from './Hello'; function App(){ return ( ) } props는 properties의 줄임말로, 어떠한 값을 컴포넌트에 전달해야 할 때 props를 ..

벨로퍼트와 함께하는 모던 리액트 벨로퍼트와 함께하는 모던 리액트: https://react.vlpt.us/ 진도 - 1.4. JSX 💬 JSX JSX는 HTML과 비슷한 형태를 가졌지만 실제로는 JavaScript이다 리액트 컴포넌트 파일에서 XML형태로 코드를 작성하면 Babel이 JSX를 JavaScript로 변환한다 Babel: 자바스크립트의 문법을 확장해주는 도구 - 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해준 - Bable을 통해 구형 브라우저 같은 환경에서도 자바스크립트가 제대로 실행할 수 있게 해 준다 ✔️ JSX 기본 규칙 import React from 'react'; import Hello from './Hello..

벨로퍼트와 함께하는 모던 리액트 벨로퍼트와 함께하는 모던 리액트: https://react.vlpt.us/ 진도 - 1.1. 리액트는 어쩌다가 만들어졌을까? - 1.2. 작업환경 준비 - 1.3. 나의 첫 번째 리액트 컴포넌트 - 1.4. JSX 💬 리액트는 어쩌다가 만들어졌을까? 프로젝트의 규모가 커질수록 DOM을 직접 건드리면서 작업을 진행하기 어려움이 있다 - 코드가 난잡해지고, 이로 인해 유지보수가 어려워진다 위와 같은 이유로 Ember, Backbone, AngularJS 등의 프레임워크가 만들어졌다 이러한 프레임워크는 특정 값이 변경될 때, 특정 DOM의 속성이 바뀌도록 연결을 해주어서 업데이트 과정을 간소화한다 반면 리액트는 상태에 따른 업데이트가 아니라 처음부터 모든 걸 새로 만들어 준다는..