React6 [React] 배열 데이터 렌더링 및 관리 자식 컴포넌트가 부모한테 값 전달하기 App 컴포넌트 내부에서 handleCreate 라는 메소드를 만든다. 그 메소드를 우리가 만든 자식 컴포넌트에게 props로 전달한다. props로 전달한 함수를 호출시켜서 data 값이 App으로 전달된다. 배열에 데이터 삽입하기 information 배열을 만든다. 리액트에서는 불변성을 중요시하기 때문에 concat을 사용하여 새로운 배열을 만들어 대입한다. JavaScript 배열 내장함수 map map이라는 내장함수는 배열을 특정함수를 사용하여 전체적으로 변환해주고 싶을 때 사용한다. 배열 렌더링, key ['a', 'b', 'c', 'd'] 라는 내용을 가지고 있는 배열이 있다고 가정해보자. '.. 2019. 5. 6. [React] Input 상태 관리 reactjs code snippets visual code 에서 reactjs code snippets를 만들고 rcc를 입력하면 클래스 컴포넌트를 자동으로 만들어준다. rsc를 입력하면 함수형 컴포넌트를 자동으로 만들어준다. input 상태 관리 만약 input이 여러개 있는 경우 input에다가 name값을 설정해주어야만 한다. 2019. 5. 3. [React] 리액트 작업 환경 설정하기 리액트 작업환경 설정하기 준비물 : node.js, VSCode 등 Node.js 설치하기 Node.js 를 LTS 버전으로 설치한다. 윈도우의 경우 노드 공식 홈페이지 다운로드 페이지에서 설치한다. (https://nodejs.org/kr/) macOS, Linux 의 경우 nvm을 통해서 설치한다. nvm은 여러 종류의 node.js 버전을 설치할 수 있게 해주는 버전이다. 나중에 새 버전이 나왔을 때 업데이트 하기도 쉽고, 터미널을 통해 어떤 버전을 사용할지 설정할 수 있어서 편리하다. curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash nvm install --lts npm 대신 ... yarn N.. 2019. 5. 1. [React] LifeCycle 소개 및 사용법 LifeCycle API 한국어로 번역하자면 '생명주기' 라고 할 수 있다. 컴포넌트가 브라우저 상에서 나타날 때 업데이트 될 때 사라질 때 중간 중간 과정에서 어떤 작업을 하고 싶을 때 LifeCycle API를 사용할 수 있다. LifeCycle API의 종류는 많다. constructor, getDerivedStateFromProps, componentDidMount, shoudComponentUpdate, getSnapshotBeforeUpdate, componentDidUpdate, componentWillUnmount, ... Mounting 컴포넌트가 우리 브라우저 상에 나타난다는 것을 의미한다. Updating 컴포넌트의 props가 바뀌거나 state가 바뀌었을 때를 의미한다. Unmou.. 2019. 5. 1. [React] 주요 개념 정리 React 주요 개념 정리 다음은 리액트 공식 사이트(https://reactjs.org/)의 Docs 를 읽고 요약 정리한 내용입니다. Hello World 가장 단순한 React 예시 아래 코드는 페이지에 "Hello, world!"라는 제목을 보여준다. ReactDOM.render( Hello, world! , document.getElementById('root') );최신 자바스크립트 문법 let and const 문을 사용하여 변수를 정의한다. class 키워드를 사용하여 JavaScript 클래스를 정의한다. 객체와 달리 클래스 메소드 사이에 쉼표를 넣을 필요가 없다. 클래스가 있는 다른 많은 언어와 달리 JavaScript에서는 this 메소드의 값이 호출되는 방식에 따라 다.. 2019. 4. 24. [React] 리액트는 무엇인가_01 프론트엔드 라이브러리 요즘의 웹은 단순히 웹 페이지가 아니라 웹 애플리케이션임 어떤 유저 인터페이스를 동적으로 나타내기 위해서는 수많은 상태들을 관리해야함 예를 들어서 다음과 같은 html 코드가 있다고 가정해보자. Counter 0 + 버튼을 눌러서 숫자 0을 바꾸어주려면 var number = 0; var elNumber = document.getElementById('number'); var btnIncrease = document.getElementById('increase'); btnIncrease.onclick = function() { number++; elNumber.innerText = number; } 프로젝트의 규모가 커지고 다양한 유저 인터페이스와 인터렉션을 관리해야 한다면 번거롭고.. 2019. 4. 16. 이전 1 다음
