Programming39 [React] 상태 관리 도구(State Management Tools) 리액트와 같이 사용하는 상태 관리 도구는 Redux 이다. Redux를 배우기 전에 상태 관리 도구란 무엇이고 왜 필요한지에 대해 알아보자 상태 관리 도구(State Management Tools) 를 사용하는 이유 React 에서 State는 component 안에서 관리되는 것이다. import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 함수형 컴포넌트 상태 관리의 예시 코드 Component 간의 정보 공유 자식 컴포넌트들 간의 다이렉트 데이터 전달은.. 2022. 4. 6. [React] Effect Hook import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // componentDidMount, componentDidUpdate와 같은 방식으로 useEffect(() => { // 브라우저 API를 이용하여 문서 타이틀을 업데이트 document.title = `You clicked ${count} times`; }); return ( You clicked {count} times setCount(count + 1)}> Click me ); } Effect Hook을 사용하면 함수 컴포넌트에서 side effect 를 수행할 수 있다. 데이터 가져오기, 구독설.. 2022. 4. 5. [React] State Hook * React 공식 홈페이지 글을 발췌하였습니다. Hook은 React 16.8에 새로 추가된 기능이며 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. Hook 은 클래스형 컴포넌트에서는 동작하지 않는다. React 는 useState 같은 내장 Hook을 몇가지 제공하며 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 직접 Hook을 만드는 것도 가능하다. 오늘은 State Hook에 대해서 정리해볼 것이다. State Hook import React, { useState } from 'react'; function Example().. 2022. 4. 5. [React] Component, props, state (부제: 함수형, 클래스형 컴포넌트) 그러면 React에서 데이터를 사용할 때 다루는 개념인 props와 state 에 대해서 알아보기에 앞서 Component의 역할과 개념은 무엇이고 클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇인지 알아보자 Component 컴포넌트는 UI를 재사용 가능한 개별적인 여러 조각으로 나눈다. props라는 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는 React 엘리먼트를 반환 엘리먼트는 일반 객체로 React 앱의 가장 작은 단위다. 엘리먼트는 컴포넌트의 구성요소이다. 컴포넌트를 선언하는 방식에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다. Class Component class Welcome extends React.Component { render() { return Hello; } } 클래스.. 2022. 4. 4. [JavaScript] async 와 await 출처 https://joshua1988.github.io/web-development/javascript/js-async-await/ 자바스크립트 async와 await (중급) 자바스크립트 개발자를 위한 async, await 사용법 설명. 쉽게 알아보는 자바스크립트 async await 개념, 사용법, 예제 코드, 예외 처리 방법 joshua1988.github.io async & await 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완했다. var user = fetchUser('domain.com/users/1'); if (user.id === 1) { console.log(user.name); } fetchUser() 이라.. 2022. 4. 1. [JavaScript] Promise 에 대해서 알아보자 Promise 자바스크립트 비동기 처리에 사용되는 객체 서버에서 받아온 데이터를 화면에 표시할 때 사용 데이터를 받아오기도 전에 화면에서 데이터를 표시하려고 할 때 발생하는 오류를 방지하기 위해 사용 프로미스를 사용하기 전에 프로미스를 사용하지 않고 데이터를 받아오는 코드를 살펴보면 function getData(callbackFunc) { $.get('url 주소/products/1', function(response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(function(tableData) { console.log(tableData); // $.get()의 response 값이 ta.. 2022. 4. 1. 이전 1 2 3 4 5 6 7 다음
