State와 Lifecycle의 정의 State 리액트 Component의 상태(리액트 Component의 변경 가능한 데이터) state는 개발자가 정의한다 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함! state는 js객체이다 class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } ... } state는 직접 수정할 수 없다(하면 안된다) //state를 직접 수정 (잘못된 사용법) this.state = { name: 'Inje' }; //setState 함수를 통한 수정 (정상적인 사용법) this.setState({ name: 'In..

Component 1. 리액트는 컴포넌트 기반이라는 중요한 특징이 있다 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 컴포넌트는 또다른 컴포넌트의 조합으로 구성될 수 있다 따라서 이러한 컴포넌트들을 레고 블록 조립하듯 컴포넌트들을 모아서 개발 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어서 개발 시간 및 유지보수 비용을 줄일 수 있다 리액트 컴포넌트도 js 함수처럼 입력을 받아서 정해진 출력을 내뱉는다 React component의 역할 : 어떠한 속성들을 입력으로 받아서 그에 맞는 React element를 생성하여 return해주는 것 **React element -React 앱을 구성하는 가장 작은 building 블록들 -객체 형태로 존재 -화면에 보이는 것을 기..

1. confirm() : 무엇인가를 확인 받을 떄 사용 가능 윈도우 확인() - 웹 API | 증권 시세 표시기 (mozilla.org) Window.confirm() - Web API | MDN Window.confirm() 메서드는 확인과 취소 두 버튼을 가지며 메시지를 지정할 수 있는 모달 대화 상자를 띄웁니다. developer.mozilla.org 0, "", null, undefined, NaN [주의사항] Number(null) //0 Number(undefined) //NaN [주의사항] Number(0) //false Number('0') //true Number('') //false Number(' ') //true **함수 선언문 : 어디서든 호출 가능** sayHello(); fu..

[js - createElement()] Document.createElement() - Web API | MDN (mozilla.org) Document.createElement() - Web API | MDN HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. tagName을 인식할 수 없으면 HTMLUnknownElement (en-US)를 대신 반환합니다. developer.mozilla.org 개념, 역할, 렌더링되는 과정 등등 [Elements란?] 어떤 물체를 구성하는 성분 Elements are the smallest building blocks of React apps. 리액트 앱을 구성하는 가장 작은 블록들..

1. 파일 확인 cd로 파일 들어가기 2. npm install

JSX란? A syntax extension to JavaScript =자바스크립트의 확장 문법 => JavaScript + XML/HTML [JSX 코드] const element = Hello, world!; JSX의 역할 내부적으로 XML, HTML 코드를 JS로 변환하는 과정을 거치게 됨 그렇기 때문에 실제로 우리가 JSX로 코드를 작성해도 최종적으로는 js 코드가 나오게 되는 것임 React.createElement( type, [props], [...children] ) [JSX를 사용한 코드] class Hello extends React.Compoenet { render() { return Hello {this.props.toWhat}; } } ReactDOM.render( , docume..