728x90 반응형 SMALL IT/React14 React - 상태 (기본) 리액트 클래스에는 리액트가 가상 DOM을 관리하기 위해 특정한 순서로 호출하는 특별한 메서드들이 정의되어 있다. render 메서드도 그런 메서드들 중 하나이다. Proptypes 에서 살펴봤던 this.props 속성은 컴포넌트 내에서 변경할 수 없다. (방법은 있지만 나중에....일단 없다고 생각하자) prop(속성)와 state(상태)는 동적 혹은 정적 데이터를 UI에서 활용하는 가장 기본적인 방법이다. 어떤 앱을 개발하든, 리액트 애플리케이션 내에서 정보를 관리하고 전달할 때는 상태와 속성을 이용한다. 상태(state)를 언제 사용할 수 있을까? - 컴포넌트에 저장된 데이터를 변경하고자 하는 경우에 사용할 수 있다. import React, { Component } from "react"; imp.. 2019. 3. 3. React - PropTypes (유효성 검사) 리액트 클래스 컴포넌트는 자유롭게 속성을 정의할 수 있다는 점에서 매력적이다 .사용하고자 하는 속성에 대한 유효성 검사를 수행할 방법을 제공해서 버그를 예방하고, 컴포넌트가 사용할 데이터의 종류에 대한 계획을 세워야 한다. 유효성 검사는 PropTypes 객체를 이용한다. PropTypes 라이브러리는 컴포넌트가 필요로 하는, 혹은 사용할 것으로 에상하는 속성들을 지정할 수 있는 유효성 검사 도구들을 제공한다PropTypes는 다른 개발자가 올바른 값을 제공하지 않으면 제대로 동작하지 않기 때문에 반드시 만족해야 하는 조건을 지정하는 방법이다.반드시 필요한것은 아니지만 버그의 예방과 쉬운 디버깅을 위해 가급적 활용하는 편이 좋다. 또한 PropTypes를 사용하면 컴포넌트가 어떤 작업을 수행해야 하는지를.. 2019. 3. 3. React - 리액트 클래스 (상태가 있는 컴포넌트) 이전글: 2019/02/23 - [IT/React] - React - 리액트 요소란? 실제로 동작하는 기능을 개발하려면 리액트 요소 이상의 것, 즉 컴포넌트가 필요하다. 리액트 컴포넌트는 요소를 그룹화하는 방법이다. 컴포넌트는 기능, 마크업, 스타일 그리고 기타 UI에 필요한 다른 요소들을 하나로 묶어 그룹화한다. 컴포넌트는 독립적이면서도 재사용이 가능하기 때문에 필요한 기능을 독자적으로 구성할 수 있다. 컴포넌트는 함수기반의 컴포넌트(상태가 없는)와 자바스크립트 클래스 기반의 컴포넌트로 나눌 수 있다. 클래스 기반의 컴포넌트에 대해서 알아보자. class MyReactClassComponent extend Component { render() {} } render 메서드 - 화면에 무언가를 출력하는 컴.. 2019. 2. 23. React - 리액트 요소란? 이전글: 2019/02/22 - [IT/React] - React - 컴포넌트란? 컴포넌트를 생성하고 관리하기 위해서는 리액트의 render 메서드를 호출해서 렌더링 해야 한다. ReactDom.render( ReactElement element, DOMElement container, [function callback] ) -> ReactComponent 위에서 보듯이 컴포넌트를 개발하기 위해서는 컴포넌트를 구성하는 기본 단위인 ReactElement에 대해서 먼저 알아봐야 한다. ReactElement (리액트 요소란?) - 리액트 요소는 리액트에서 컴포넌트를 구성하기 위한 기본 단위다. - 리액트 요소는 문자열을 이용해(div, a, p 등) DOM 요소를 생성한다. - props 객체를 이용해 리.. 2019. 2. 23. 이전 1 2 3 4 다음 728x90 반응형 LIST
