반응형 개발/React3 [React] React Component 1. Component 컴포넌트는 특정 부분이 어떻게 생길지 정하는 선언체이며, LifeCycle API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업을 처리할 수 있고, 메서드를 만들어 기능을 붙일 수도 있습니다다. 리액트 프로젝트에서 서로 조합이 가능한, 모듈화된 컴포넌트를 사용해 만듭니다. 2. Component 생성하기 import React, { Component } from 'react'; class NewComponent extends Component { render() { return ( 새로운 컴포넌트 ); } } export default NewComponent; 위 코드에서 모듈 내보내기와 불러오기 코드가 있습니다. 1. 모듈 불러오기 impo.. 2021. 2. 3. [React] React JSX 1. JSX ※ JSX 는 자바스크립트 확장 문법입니다. React 에서 이벤트가 처리되는 방식, 시간에 따라 state 가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 알아야합니다. React 는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 컴포넌트를 이용해 느슨하게 연결됩니다. React JSX 사용은 필수가 아닙니다. Javascript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 될 것입니다. 또 React 가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다. // JSX 코드 var a = { JSX 코드 } // 바벨 코드 var a = Rea.. 2021. 2. 1. [React] React 특징 React 의 특징 리액트는 자바스크립트 라이브러리로 유저 인터페이스를 만드는데 사용합니다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View, 뷰)만 신경 쓰는 라이브러리입니다. 컴포넌트(Component) 리액트의 특징 중 가장 마음에 드는 부분입니다. 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트(Component)라고 합니다. 컴포넌트는 다른 프레임워크에서 유저 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념으로 재사용이 가능한 API로 수많은 기능을 내장하고 있습니다. 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다. ※ 컴포넌트는 최초로 실행한 '초기 렌더링'과 컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링' 개.. 2021. 1. 25. 이전 1 다음 반응형
