금마 일기

🎈 Component API 🎈 이번에는 React component API에 대해서 알아보자. setState(), forceUpdate, ReactDOM.findDOMNode() 이 3가지 메서드와 this.method.bind(this)를 사용할 것이다. 📌 Set State 🔧 setState() 메서드는 컴포넌트의 상태를 업데이트 할 때 사용된다. 🔧 이 메서드는 state를 교체하는게 아니라 단지 원래 상태에 바뀐 것을 더하는 것이다. import React from 'react'; class App extends React.Component { constructor() { super(); this.state = { data: [] } this.setStateHandler = this.setS..

🎈 Props 🎈 state와 props의 가장 큰 차이점은 props는 불변이라는 것이다. 우리가 container component가 state로 정의되어야 한다는 이유가 된다. 📌 Props 사용 🔧 component에 불변의 데이터가 필요하다면 props를 main.js. 안에 있는 reactDOM.render() 함수에 추가하거나, 🔧 component 안에 사용하면 된다. App.jsx import React from 'react'; class App extends React.Component { render() { return ( {this.props.headerProp} {this.props.contentProp} ); } } export default App; main.js import ..

🎈 State 🎈 📌 State는 데이터가 오는 곳이다. 📌 State는 가능한 간단하게 그리고 stateful component의 숫자를 최소화해야 한다. App.jsx import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { header: "Header from state...", content: "Content from state..." } } render() { return ( {this.state.header} {this.state.content} ); } } export default App; main.js import React from 'react..

🎈 Components 🎈 📌 어떻게 컴포넌트를 합치고 유지하기 쉽게 만드는지 배워봅시다 📌 페이지의 다른 것들에는 영향을 미치지 않고 컴포넌트만 바꾸고 업데이트 하는 것을 가능하게 해줍니다 App.jsx import React from 'react'; class App extens React.Component { render() { return ( ); } } class Header extends React.Component { render() { return ( Header ); } } class Content extends React.Component { render() { return ( Content The content text!!! ); } } export default App; 🔧 이 페이..

🎈 JSX 🎈 import React from 'react'; class App extends React.Component { render() { return ( Hello World!!! ); } } export default App; 🔧 JSX는 Html과 비슷하게 생겼지만 JSX를 작업할 때 몇가지 주의해야 할 것들이 있다. : Nested Elements, Attributes, JavaScript Expressions, Styling, Comments, Naming Convention 📌 Nested Elements import React from 'react'; class App extends React.Component { render() { return ( Header ..

🎈 REACT 개요 🎈 📌 React 특징 - JSX - : Javascrpit 문법의 확장형. React 개발에서 필수적으로 사용해야하는건 아니지만 권장된다. - Component - : React의 모든 것이자 전부 - Unidirectional data flow and Flux - : React는 단방향 데이터 흐름을 가진다. : Flux는 이 단방향 데이터 흐름을 도와주는 패턴이다. 📌 React 장점 : 일반적인 DOM보다 훨씬 빠른 Javascript virtual DOM을 사용한다. : Client나 Server에서 다른 framework들과 같이 잘 어울려서 사용될 수 있다. 📌 React 한계점 : 어플리케이션의 view layer만 다룬다. 즉, 완전한 개발을 위해서는 다른 기술이나 툴..

🎈 개발환경 SETTING 🎈 📌 VS CODE 설치 📌 NODE.js 설치 📌 REACT 설치 react 코드들을 저장 해둘 위치에 가서 cmd 창을 열어준다. 🔧 위의 파일 위치가 나타나는 곳에 cmd 라고 입력 후 Enter 키를 누르면 해당 위치에 cmd가 열린다. 🔧npm이 정상적으로 설치되어 있는지 확인하기 위한 명령어를 쳐본다. npm --version 🔧node.js가 정상적으로 설치되어 있는지 확인하기 위한 명령어를 쳐본다. node --version 🔧 버전 명이 이상없이 출력된다면 그 다음 단계로 넘어가자 npm install -g create-react-app 를 입력하면, 열심히 다운로드가 된다. 다운로드가 다 끝나면 create-react-app my-app 🔧 여기서 my-ap..