React (3) 썸네일형 리스트형 State 1. State란? 지금까지 우리가 리액트 컴포넌트를 만들 때는, 동적인 부분이 하나도 없었다. 값이 바뀌는 일이 없었기 때문이다. 이번에는 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 어떻게 구현할 수 있는지에 대하여 알아보겠다. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 이번에는 useState 라는 함수를 사용해보게 되는데, 이게 바로 리액트의 Hooks 중 하나이다. 바로 예제를 보면서 이해하면 될 것 같다. 가장 많이 쓰이는 count 예이다. [index.js] import React from 'react'; impor.. React 변수 선언 React 컴포넌트를 선언하는 방식에는 두 가지 있다. 바로 함수형 컴포넌트와 클래스형 컴포넌트이다. 오늘 포스팅에서는 각각의 방식으로 어떻게 변수를 선언하는지 간단히 살펴보겠다. 1. 함수형 컴포넌트 [App.js] // import '' from '파일명'; import Comp from "./Comp"; import ClassComp from "./ClassComp"; function App() { return ( // 바로 밑의 태그들을 반환함 // 아래처럼 div와 같은 태글들로 묶어서 내보내야 함 // 아무것도 안 쓰고 로 작성해도 상관 없음 ); } // App을 내보냄으로 index.js에서 받아서 쓸 수 있음 export default App; [index.js] import React .. 리액트(React) 사용법 1. 리액트란? 리액트는 사용자 인터페이스를 만들 위한 Javascript 라이브러리이며 처음 만든 곳은 페이스북이다. React는 컴포넌트 기반으로 이루어져 있다. 복잡한 UI를 컴포넌트로 관리하여 돔과 별개로 상태 관리가 가능하다. 또한 vue와 동일하게 데이터가 변경될 때마다 효율적으로 페이지가 갱신되고 랜더링 된다. 이러한 기능으로 좀 더 역동 적인 페이지를 만드는 것이 가능할 것으로 보인다. 가장 큰 장점은 리액트를 배울 경우 추후 React Native를 이용하면 모바일 웹도 개발이 가능하니 일석 이조다. 2. 리액트 프로젝트 생성하기 먼저, React 프로젝트 코드를 작성하기 위해서는 최신 버전의 Node.js 가 필요하다. Node.js가 없을 경우, 아래 링크를 통해서 Node.js를 먼.. 이전 1 다음
