babydevelopbabydevelop

React 컴포넌트 안의 state와 생명주기에 대한 개념을 소개해보겠습니다! 함수에서 클래스로 변환하기 다섯 단계로 Clock과 같은 함수 컴포넌트를 클래스로 변환할 수 있습니다. React.Component를 확장하는 동일한 이름의 ES6 class를 생성합니다. render()라고 불리는 빈 메서드를 추가합니다. 함수의 내용을 render() 메서드 안으로 옮깁니다. render() 내용 안에 있는 props를 this.props로 변경합니다. 남아있는 빈 함수 선언을 삭제합니다. class Clock extends React.Component { render() { return ( Hello, world! It is {this.props.date.toLocaleTimeString()}. ); } ..

함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다. function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다. 이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭합니다. 또한 ES6 class를 사용하여 컴포넌트를 정의할 수 있습니다. class Welcome extends React.Component { render() { return Hello, {this.props.name}; ..

1. node.js 설치! https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. node.js 설치여부 확인! cmd 창에 아래 명령어를 입력해 봅니다. (cmd 창 키는 방법: 키보드 내 윈도우 버튼 + cmd 입력) node -v 위와같은 문장이 출력되면 node.js가 설치되어 있지 않다는 것이므로 설치여부 확인후 설치하셔야합니다! 3. 리액트 CLI 설치 npm install -g create-react-app 터미널(cmd)에서 React CLI를 설치합니다. 4. 리액트 설치 확인 create-react-app --version 터미널을 ..