React/일반 (15) 썸네일형 리스트형 리액트의 주요한 특징 - 렌더링 렌더 메소드의 아웃풋으로 리액트 엘리먼트가 나오는데 이 엘리먼트는 DOM이 아니고 DOM 엘리먼트를 가리키는 자바스크립트 객체다. DOM보다 가벼워 새로 만들더라도 리소스를 덜 잡아 먹는다. 이를 버추얼 DOM이라고 부른다. 컴포넌트의 state가 바뀌었을 때 새로운 리액트 엘리먼트를 얻게 되고 이전의 엘리먼트와 비교한다. 바뀐 부분이 있다면 DOM의 해당 부분을 업데이트해서 버추얼 DOM과 맞춘다. 단순히 컴포넌트의 state를 바꾸면 리액트는 자동적으로 이에 맞게 변화시켜 주는 원리다. 그래서 이 라이브러리의 이름이 react이기도 하다. 참고 : youtu.be/Ke90Tje7VS0?t=205 리액트를 위한 비쥬얼 스튜디오 익스텐션 - Simple React Snippets 비쥬얼 스튜디오에서 Simple React Snippets라는 익스텐션을 깔면 리액트 작업 중 js 파일에서 간단하게 컴포넌트 프리셋을 불러올 수 있다. imrc를 입력하면 아래처럼 react를 import하고 import React, { Component } from 'react'; cc는 class 컴포넌트를, sfc는 function 컴포넌트 초기 코드를 불러 온다. 리액트 라우터를 이용한 리액트 프로젝트 기본 설정 방법 1. 다음을 입력하면 리액트 개발 환경에 필요한 기본적인 것들이 갖춰진 프로젝트 폴더가 생성된다. npx create-react-app 폴더이름 https://create-react-app.dev/docs/getting-started 2. 다음을 입력해서 리액트 라우터를 설치한다. npm install --save react-router-dom 이제 라우터를 이용해 리액트에서 작성한 결과물을 우리가 만들 서버에서 불러올 수 있다. https://create-react-app.dev/docs/installing-a-dependency 3. src/App.js의 내용을 아래 페이지의 Basic Example 링크의 코드로 바꾸는 게 시작하기 좋다고 한다. https://create-react-app.dev/.. 리액트 라이프 사이클 리액트에는 각 컴포넌트가 mounting, updating, unmounting 될 때 자동적으로 호출되는 메소드들이 있다. 이를 라이프 사이클 메소드라고 부른다. Mounting 1. constructor 컴포넌트가 생성될 때 제일 먼저 호출되는 함수다. constructor를 쓰려면 먼저 super(props);를 호출해야 한다. 이로써 React.Component를 상속하게 된다. state 값을 초기화하는 곳이기도 하다. constructor(props) { super(props); this.state = { color: 'red' }; } 2. getDerivedStateFromProps render 메소드 바로 직전에 호출 된다. props에서 받은 값으로 state를 초기화하기 좋은 위치다... 리액트 state state를 활용하려면 ES6 방식으로 클래스를 정의해야 한다. class Clock extends React.Component { constructor(props) { // 생성자 규칙 super(props); this.state = { date: new Date() }; // constructor 안에서만 이렇게 정의할 수 있다. } render() { return ( { this.state.date.toLocaleTimeString() } // this.state를 사용한다. ); } } ReactDOM.render(, document.getElementById('root')); state를 변경하려면 setState() 메소드를 써야 한다. 위의 경우 this.setState({ date: new.. 리액트 기본, 컴포넌트, props 1. JSX 리액트 개발 환경에서 태그가 나오면 JSX가 자동으로 객체 형태로 바꿔준다. const element = Hello; 위는 아래와 동일하다. const element = { type: 'h1', props: { className: 'greeting', // 리액트에서는 class 대신 className을 쓴다. children: 'Hello' } } 2. Rendering Elements 리엑트는 기본적으로 특정 엘리먼트에 추가하는 방식으로 사용한다. const element = Hello; ReactDOM.render(element, document.getElementById('root')); 3. Components and Props 리엑트는 편의성과 재사용을 위해서 보통 컴포넌트를 활용.. 리액트에서 자식을 포함한 엘리먼트 추가 방법 counter.jsx import React, { Component } from 'react'; class Counter extends Component { render() { // return되는 부모 엘리먼트는 하나만 올 수 있고 // 로 감싸주면 자식들을 넣을 수 있다. // 는 렌더링시 포함되지 않는다. return ( Hello World Button ); } } export default Counter; 비교 : https://thinkforthink.tistory.com/126 참고 : https://youtu.be/Ke90Tje7VS0?t=1902 이전 1 2 다음
