본문 바로가기

component

LifeCycle API 컴포넌트가 DOM 위에 생성되기 전/후 및 데이터가 변경되어 상태를 업데이트하기 전/후로 실행되는 메소드를 의미합니다. 컴포넌트를 생성할 때 constructor -> componentWillMount -> render -> componentDidMount 순으로 진행됩니다. constructor(props) 이 메소드는 초기 상태로 컴포넌트를 초기화하는 데 사용됩니다. 기본 UI 요소는 아직 렌더링 되기 전의 상태입니다. 샘플 데이터로 컴포넌트를 시작하고, 컴포넌트의 prop은 인수로 전달됩니다. componentWillMount() 컴포넌트가 DOM 위에 만들어지기 전에 실행됩니다. 일반적으로 외부 API에서 데이터를 가져오는 데 사용됩니다. render() render 메소드는 렌더링 하기 위해 R.. 개발 개념 살펴보기_ 2020. 3. 17.
Part 12-4. 리액트 살펴보기(State 와 Lifecycle) State는 props와 유사해 보이지만 State는 컴퓨터 내부에서 사용하는 자료이므로 비공개 자료이다. 그리고 State는 데이터를 수정할 수 있는 공간이라고 할 수 있다. 즉, props가 component에 정보를 전달한 후 DOM으로 호출된다고 할 수 있다. 이때 component 안에 들어 있는 것이 State이다. 따라서 State는 컴포넌트에 의해 완전히 제어된다. 컴포넌트 캡슐화 메인 어플리케이션으로부터 독립되어 있는 컴포넌트를 의미합니다. 이를 통해 컴포넌트 내부에서 발생하는 업데이트, 테스트 케이스, 재사용에 용이하게 컴포넌트를 설계할 수 있습니다. Clock 컴포넌트를 재상요하고 캡슐화하는 방법을 알아보도록 하겠습니다. 함수에서 클래스로 변환하기 다섯 단계로 Clock과 같은 함수 .. Today Learning _ 2020. 3. 17.
Part 12-3. 리액트 살펴보기(Components 와 Props) 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 Javascript 함수와 유사합니다. "props"라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. function component와 class component 컴포넌트를 정의하는 가장 간단한 방법은 Javascript 함수를 작성하는 것입니다. 함수는 데이터를 가진 하나의 props(속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다. function Welcome(props) { return Hello, { props.name } ; } 이런 컴포넌트는 .. Today Learning _ 2020. 3. 16.

티스토리툴바