본문 바로가기

React

React의 Life Cycle 오늘은 React의 Life Cycle(생명주기)에 대해서 알아 보도록 하겠습니다. React에는 Component가 생성 되고 소멸 될 동안 단계별로 Component를 컨트롤 할 수 있도록 여러 메소드들이 있는데 우리는 그 메소드들을 오버라이드 해서 사용 할 수 있습니다. The Component Lifecycle Component 의 Lifecycle 은 크게 이렇게 나누어 살펴 볼 수 있습니다. Mounting Component의 인스턴스가 생성되고 DOM의 삽입 될때 과정입니다. 이 순서대로 진행 됩니다.constructor() static getDerivedStateFromProps()render()componentDidMount() * 참고 원래는 static getDerivedStateFr.. 더보기
Props 와 State 이번 포스팅은 React의 State 와 Props 에 대해서 정리 해보려고 합니다. State 와 Props는 React Component 에서 빠질 수 없는 기본적이면서 중요한 개념입니다. 이 두 가지 개념을 이용하여 부모 컴포넌트와 자식 컴포넌트 간 데이터를 전달 하고 컴포넌트의 데이터를 변화 시킵니다. 그렇기 때문에 다들 아시겠지만 이 두 개념은 처음 리액트를 접하거나 배우게 되면 항상 묶여져 있습니다. Props Props 는 properties 의 줄임말 입니다. Props는 Component 로 데이터를 전달 합니다. render ( Hello movies! {this.props.title} ) class MoviePoster extends Component { render() { retur.. 더보기
React 란 무엇 일까? 요즘 프론트앤드 자바스크립트 프레임워크 중에 React, Vue.js, Angular가 각광을 받고 있습니다. 그 중에서도 리액트 사용자들이 급증하고 있는 것을 여러 매체를 통해 알 수 있습니다. 여전히 앵귤러의 사용자들도 여전히 많지만 리액트의 성장률은 단연 돋보입니다. 리액트가 어떤 매력이 있는지 몸소 느껴보기 위해 공부 해보기로 했습니다. 일단 리액트가 무엇 인지부터 알아 보겠습니다. React 란? 리액트는 2013년 Facebook 에서 오픈소스로 내놓은 자바스크립트의 라이브러리입니다. 리액트는 뷰 라이브러리이다. 즉, 기존의 다른 프레임워크들과 다르게 뷰에만 집중 합니다. 다시 한 번 설명 하면 Angular나 Vue.js 같은 경우는 MVC, MVVM의 패턴을 사용 하지만 React 같은 경.. 더보기