프론트엔드(Front-End)/React (11) 썸네일형 리스트형 [REACT] 리액트의 STATE 1. REACT STATE란? 리액트의 state란 컴포넌트 내에서 바뀔 수 있는 값을 말합니다 react의 컴포넌트의 props는 부모 컴포넌트로부터 받은 값을 그저 읽기 전용으로 사용할 수 밖에 없습니다. 그러나 react의 state를 사용하면 부모 컴포넌트로부터 받은 값으로 여러가지 데이터 처리가 가능합니다. 리액트의 state와 props는 구분되는 개념입니다. (같지 않음) 클래스형 컴포넌트의 state 클래스형 컴포넌트에서는 크게 두가지 방법으로 state를 선언할 수 있습니다. 첫번째는 생성자를 이용하여 state를 설정하는 방법입니다. 두번째는 state = {} 문법으로 선언하는 방법입니다. 생성자로 state를 선언하고 사용한 경우 import { Component } from "re.. [REACT] 리액트의 컴포넌트(COMPONENT) 1. REACT의 컴포넌트(Component)란? 리액트는 화면을 컴포넌트(Component) 단위로 구성합니다. 컴포넌트란 화면을 구성할 수 있는 각각의 자바스크립트 파일들을 의미하며 root 태그로 묶여있습니다. 리액트는 이것을 **컴포넌트(Component)**라고 부르며 이것을 기준으로 화면을 렌더링합니다. 컴포넌트가 된 js 파일들은 App.js에서 정말로 부품처럼 사용이 가능합니다. 예컨데, MyCompoent.js 라는 이름을 가진 js 파일은 App.js 에서 태그로 사용 가능합니다. 2. 리액트의 컴포넌트 타입 리액트의 컴포넌트는 크게 두가지 타입으로 나뉩니다. 하나는 클래스형 컴포넌트이고 다른 하나는 함수형 컴포넌트 입니다. 함수형 컴포넌트는 본래 리액트 컴포넌트의 state를 다루지 .. [REACT] React와 JSX 💡 알고 가기! 본 포스트는 React CLI 환경이 모두 갖춰진 상태라는 가정 하에 글을 작성하였습니다. 혹시 처음 본다면 아래의 글을 먼저 보시거나, React 시작하기 등의 가이드를 참조해주세요. 1. JSX란? JavaScript + XML의 약자로 자바스크립트와 html 문법을 함께 쓸 수 있는 문법입니다. 정말 말 그대로 자바스크립트와 html 을 같이 사용 가능합니다. const element = Hello World! 물론, 무작정 빈 자바스크립트 파일에 저렇게 작성한다고 JSX가 지원되지는 않습니다. 리액트 CLI가 깔려 있거나, babel을 cdn 방식으로 사용하는 등의 추가 설정이 필요합니다. 본 포스트에서는 cdn 방식의 jsx 사용법은 다루지 않습니다. 2.1. 리액트로 화면 구성.. 이전 1 2 다음
