해나아부지 개발일지

React에서 데이터를 다룰 때 props(properties: 속성)를 써야하는지 state(상태)를 써야하는지 구분하는 것은 매우 중요하다. 정적(static) vs 동적(dynamic) React의 근간이 되는 컴포넌트(Component)는 Tree 구조처럼 계층을 갖는다. props는 정적인 데이터이다. 쉽게 말해 상위 컴포넌트(부모 컴포넌트)의 데이터를 전달받아 사용하는 데이터이다. 반면 state는 동적인 데이터이다. 클라이언트에서 유저의 요청 및 이벤트 혹은 비동기처리 등에 의해 실시간으로 변화하는 데이터이다. function Welcome(props) { return Hello, {props.name}; } function App() { return ( ); } ReactDOM.render..

const element = ( Hello, world! ); JSX란? const element = Hello, world!; Html과 JavaScript를 Mix 해놓은 듯한 코드는 Javascript를 확장한 문법이다. JSX라고 하면 특정 언어 같아 보이지만, JavaScript의 모든 기능이 포함되어 있다. 모든 기능이 포함되어 있다는 말은 ES6 문법을 사용할 수 있다는 말과 같다. React에서 JSX사용은 필수가 아니지만 가독성 측면에서 JSX 사용은 효과적이다.. 또한 React에서 에러 및 경고 메시지를 표시하여 도움을 준다. JSX에 표현식(javascript) 포함하기 const name = 'Josh Perez'; const element = Hello, {name}; React..

React를 하기 위해 필요한 것들 1. node.js node.js 공식 사이트에서 LTS 버전을 다운로드 및 설치한다. download | node.js 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. create-react-app node.js 설치가 끝나면(npm이 같이 설치된다) 터미널에서 npm(node package manager) 명령어를 입력해서 React 패키지를 설치해준다. //Mac $npx create-react-app react-app npx는 npm 5.2 버전 이후부터 제공되는 명령어로 원래는 로컬(데스크탑) 전역에 react 패키지 설치 후 ..