React

React - State 끌어올리기

이번 포스팅에서는 State 끌어올리기에 대해 알아보고자 한다. Component 구조로 이루어진 React에서는 종종 동일한 데이터에 대한 변경사항을 여러 component에 반영해야 할 필요가 있다. 이럴 때 사용하는 테크닉 중 하나가 가장 가까운 공통 조상으로 state를 끌어올리는 것이다. 전체적인 프로세스는 다음과 같다. 1. 가장 가까운 부모 component 안에서 state를 만들어준다. 2. 부모 component 안에서 state를 변경할 수 있는 함수를 만들어서 자식 component에게 전달한다. 3. 자식 component는 전달 받은 함수를 이용해서 부모 component의 state를 변경한다. 4. 상태가 변경되었기 때문에 자식 component 안의 render( ) 함수들..

React - 리스트와 Key

이번 포스팅에서는 React를 사용해서 리스트를 만들어보고자 한다. 우선 ReactDOM.render( )를 이용해 랜더링 할 component를 다음과 같이 만들어 놓고 시작하도록 하자. 이제 랜더할 리스트 component를 만들어서 component 안에 집어 넣기만 하면 된다. 원래는 게시글 리스트 같은 것을 만들 때 데이터베이스와 통신해서 그 결과물을 가져와야 하지만 배열 형태의 더미 데이터를 state 객체 안에 담아놓고 리스트를 만들어 보도록 하겠다. 짚고 넘어가야할 포인트는 map 함수와 JSX 문법을 이용해 배열에 담긴 데이터를 엘리먼트 안에 넣어서 다시 배열로 만들었다는 것이다. 그렇게 반환된 배열을 안에 집어넣기만 하면 리스트가 만들어진다. 이 때 리스트의 각 항목에 "key"를 넣어..

React - Props & State

Props 와 State의 역할 Props State counter 버튼 만들기 1. Props 와 State 의 역할 props와 state는 React에서 데이터를 사용할 때 등장하는 개념이다. 각각의 역할에 대해 알아보기 이전에 React를 공부함에 있어서 중요하게 짚고 넘어가야 할 포인트에 대해 언급하고자 한다. " 데이터가 바뀌면 화면이 바뀐다. " 프론트 서버에서는 백 서버에 데이터를 요청하고 요청받은 데이터를 이용해서 화면을 그리는 작업을 진행하게 된다. 하지만 만약 데이터가 바뀌면 화면이 바뀔 수 있도록 프로그래밍 되어 있다면 보다 수월하게 UI를 제작할 수 있을 것이다. 그리고 이러한 모토를 가지고 있는 것이 바로 React이다. 여기서 데이터란 props와 state를 말하..

React 기본 개념

React란? React & ReactDOM Component 클래스형 Component 함수형 Component 1. React란? React 공식 홈페이지에서는 React를 다음과 같이 정의하고 있다. "사용자 인터페이스를 만들기 위한 JavaScript 라이브러리" 말 뜻 그대로 React는 JavaScript 라이브러리 혹은 웹 프레임워크라고 생각하면 된다. (라이브러리 보다는 프레임워크에 가깝다고 생각한다.) 라이브러리와 프레임워크의 차이를 간략히 기술하자면 폴더 구조가 없는 형태를 라이브러리, 폴더 구조가 있는 형태를 프레임워크라고 볼 수 있다. 따라서 프레임워크를 사용할 때는 특정 디렉토리 안에서 작업을 해줘야만 하는 특성이 있다. React는 Facebook에서 제공해주는 오픈..