[Hooks의 개념과 useState, useEffec] Hooks useState state를 사용하기 위한 Hook setCount => useState를 사용하는 방법에서는 변수 각각에 대해 set 함수가 따로 존재! useEffect : Side effect를 수행하기 위한 Hook Side effect : 리액트에서는 효과, 영향을 의미함 다른 컴포넌트에 영향을 미칠 수 있으며, 렌더링 중에는 작업이 완료될 수 없기 때문 => 리액트의 함수 컴포넌트에서 Side effect를 실행할 수 있게 해주는 Hook useMemo Memoized value를 리턴하는 Hook Memoization? 최적화를 위해 사용. 연산량이 많이 드는 함수의 호출량을 기억해두었다가 같은 입력값으로 함수를 호출하면 새..

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 블록들 -객체 형태로 존재 -화면에 보이는 것을 기..

[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..