jeong's blog

1. React의 LifeCycle 초기구성 : React 컴포넌트 객체가 DOM에 실제로 삽입되기 전까지의 과정을 마운팅(Mounting)이라고 하는데, 마운팅 시 아래의 LifeCycle 함수들이 순차적으로 수행된다. constructor() componentWillMount() render() componentDidMount() 컴포넌트가 모두 구성된 직후인 componentDidMount() 함수에서 데이터를 가져오는 API 호출을 수행하면 효과적이다. 2. API 호출 예제 2-1. fatch API를 사용해 서버로부터 데이터를 가져와 화면에 표출하는 예제 위와 같은 React LifeCycle의 개념을 활용해 API를 호출하는 예제를 작성해보자. 예제에서는 javascript ES6에서 지원하..

1. Component의 props 와 state 리액트 컴포넌트에서 다루는 데이터는 props와 state로 나뉜다. props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 값이다 (-> 부모 컴포넌트에서 자식 컴포넌트로 전달하는 속성값들을 의미하는 'properties'의 줄임말) 자식 컴포넌트에서는 props를 받아오기만하고, 받아온 props를 직접 수정할 수 는 없다. state는 컴포넌트 내부에서 선언하며 내부에서 관리되는 값이다. 값을 변경할 수 있다. props 와 state 비교 및 정리 : props 와 state 는 둘다 일반 JavaScript 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 데이터를 갖고 있으나 props는 함수의 매개변수처럼 컴포넌트에 전달 (전달받은 컴포넌..

JSX 란? Javascript + XML 이 합쳐진 자바스크립트의 확장 문법이다. 개발자가 자바스크립트 내부에 마크업 코드를 작성할 수 있도록 해준다. JSX 문법에서는 java, c++과 유사하게 카멜케이스를 사용한다. 리액트의 컴포넌트는 항상 렌더링을 수행하며. render() 함수가 렌더링할 요소(element)를 반환하는데 이때 JSX문법을 사용할 수 있다. JSX에서는 중괄호{}를 이용하여 자바스크립트(JavaScript) 구문을 실행할 수 있다. 이러한 중괄호는 속성의 값으로도 들어갈 수 있다는 점에서 사용이 편리하다. 특징 및 주의할 점 jsx 문법에서는 여러개의 요소가 들어갈때 전체 요소를 감싸주는 태그가 없으면 오류가 발생한다. 1개 이상의 요소가 사용될 때는 아래 코드의 과 같이 감싸..

React 란? UI를 효과적으로 구축하기 위해 사용하는 자바스크립트(JavaScript) 기반의 라이브러리이다. React는 Facebook에서 개발한 유저 인터페이스 라이브러리로서 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 해 준다. 이미 Facebook을 비롯하여 Airbnb, Netflix, Dropbox, Twitter, Evernote, Uber 등의 큰 서비스들에서 React를 사용하고 있다. React의 특징 및 장점 Component 기반 : 리액트는 모든 것이 Component로 이루어진다. Component는 UI를 구성하는 개별적인 뷰 단위이다. 작은 블록들을 조립하여 성을 만드는 것처럼, 전체 앱은 각 Component들이 결합하여 만들어진다. 캡슐화된(Encapsula..