리액트 (4) 썸네일형 리스트형 [React Hooks] useState State 란? 컴포넌트의 동적인 값을 상태 (state) 라고 함 사용자 인터랙션을 통해 컴포넌트의 상태 값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요함 React Hooks 가 나오기 전의 불편한 점 React Hooks 가 나오기 이전에는 상태값을 관리하기 위해 class 기반의 클래스 컴포넌트를 작성해야했다. 클래스 컴포넌트는 간단한 상태 관리 조차도 함수형 컴포넌트에 비해 복잡하여 유지 보수가 매우 힘들었음 UseState 기본 구문 컴포넌트의 상태를 생성 & 업데이트 할 수 있는 도구 (hook) 이다. const [state, setState] = useState(초기값) useState 의 인자에 초기값을 넣어준다 - useState(0) , useState(true) 등등 st.. 리액트 개발 환경 설치하기 Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다. 설치 순서 노드 버전 매니저 (nvm) 로 노드제이에스 (node.js) 설치하기 yarn 과 create-react-app 설치 비주얼 스튜디오 코드와 플러그인 설치 노드 버전 매니저 (nvm) 으로 node.js 설치하기 node.js - 구글에서 공개한 소프트웨어 - V8 엔진을 기반으로 만든 자바스크립트 런타임 도구 > node.js 는 웹 브라우저가 아닌 컴퓨터 (또는 서버) 에서 자바스크립트를 실행할 수 있게 해줌 - npm 은 node.js 와 함께 설치가 된다 nvm - node.js 를 설치하거나 버전을 관리해주는 프로그램 NVM 설치하기 (window) window 1. 아래의 주소에서 nvm-setup... React (리액트)에 대해서 Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다. 리액트의 정체 프론트엔드의 프레임워크 중 하나 현재 주목받는 프레임워크 중 프레임워크 다운로드 현황 그래프에서 가장 우세한 프레임워크 페이스북을 개발할 때 사용한 기술이며, 공개 소프트웨어 가장 큰 특징은 "화면 출력에 특화된 프레임워크" 리액트의 장점 1. 컴포넌트로 화면 구성을 효율적으로 할 수 있음. 1. 컴포넌트 (component) 라는 작고 독립적인 코드 블록을 조합하여 빠르고 효율적으로 화면을 구성 2. 컴포넌트를 구성하는 코드는 조립하기 쉬운 형태를 가지고 있기 때문에 원하는 화면을 쉽게 만들 수 있음 "컴포넌트를 만드는 과정은 레고 블록을 조립한다"라고 이해하면 쉬움 3. 가상 화면 기술을 도입하여 화면 출.. Sortable 컴포넌트 만들기 (drag and drop) 리액트 (React) 로 Sortable 컴포넌트 만들기입니다. 강의 보고 이해가 안가서, 복습할 겸 정리하는 글이다보니 정확도가 높지않을 수 있습니다. 그래도 구현은 했으니, 참고해주세요 https://www.npmjs.com/package/@imsmallgirl/sortable-list @imsmallgirl/sortable-list This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).. Latest version: 0.1.0, last published: 10 minutes ago. Start using @imsmallgirl/sortable-list in your proj.. 이전 1 다음
