리액트

커스텀 훅

Custom Hook 1. 커스텀 훅은 왜? 관심사의 분리 코드를 처음부터 잘 작성하더라도 다양한 이유로(ex. 기획의 변화, 디자인 변경, 요청 사항 추가) 개발 기간 동안 적어도 한번은 처음과는 다른 조건과, 상황에 대응하도록 수정해야 할 필요성이 생긴다. -> 여러가지 문제를 한번에 해결하도록 단위를 짜는 것이 아니라 한가지 문제만 해결하도록 단위를 잘게 짜도록 한다 장점 코드의 명료화 코드의 재사용성 용이 유지 보수의 용이 테스트 코드 작성이 쉬움 2. 커스텀 훅 view와 Logic의 분리 Presentational Component : UI Only 컴포넌트 state, effect등 로직 없음 -> 화면을 렌더링하는데 필요한 코드만 존재 const UserList = ({ users }) =..

리덕스 맛보기

리덕스 리액트 상태 관리 라이브러리 어플리케이션의 상태를 저장,관리 React-redux를 통해 리액트에서 사용 가능 리덕스를 사용하는 이유? 리액트는 컴포넌트를 쪼개서 하위, 하위, 하위, 컴포넌트를 구성하고 있다(프로젝트 규모가 클수록 컴포넌트 구조가 복잡하다) 리액트의 컴포넌트는 각각의 state를 쓰고 있는데 보통 같은 state를 쓰는 같은 계층의 컴포넌트가 있다면 상위 컴포넌트에서 props로 넘겨줘야 한다 -> 규모가 클수록 복잡해진다(같은 state를 많은 컴포넌트에서 쓴다면 복잡해진다) -> 그래서 리덕스를 통해 필요한 컴포넌트에서만 state를 쓸 수 있게 할 수 있다. 개념 component- 화면을 보여주는 뷰 store - 프로젝트 상태에 관한 데이터들이 담겨있다.(단 하나의 공간..

간단하게 이미지 슬라이드 구현하기

useRef를 사용하여 간단하게 이미지 슬라이드를 구현하고 setTimeout을 사용해 자동으로 이미지가 넘어가도록 이벤트 설정 result를 0.5로 보면 편합니다(코드펜보다 실제 툴을 사용해 구현하면 더 상세히 알 수 있음) See the Pen Untitled by Sunyeong (@cozynye) on CodePen.

리액트 리코일

recoil recoil 리액트를 위한 상태 관리 라이브러리. 리코일은 기존의 리덕스와 MobX 같은 상태관리 도구들에 비해 가볍고 유연하게 사용할 수 있도록 페이스북에서 오픈소스로 공개한 라이브러리이다 Atom Atom은 상태이다. 리액트의 state,props 와 비슷하지만 리덕스의 store의 상태들처럼 구독할 수 있고 Atom의 상태가 변경되면 구독하고 있는 컴포너트들의 다시 랜더링되면서 변경된 Atom의 상태를 공유한다. Selector Selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)다 쉽게 생각하면 컴포넌트에서 일일이 상태 값들을 컴포넌트끼리 전달하고 관련된 컴포넌트가 렌더링 되는 것이 아니라 한곳에 모아두고 렌더링할 때마다 그 ..

(리액트를 다루는 기술) 8장 Hooks

Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공 useState useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌. App.js; import React from "react"; import Counter from "./Counter"; const App = () => { return ( ); }; export default App; Counter.js; import React, { useState } from "react"; const Counter = () => { const [value, setValue..

(리액트를 다루는 기술) 6장 컴포넌트 반복

컴포넌트 반복 자바스크립트 배열의 map()함수 문법 array.map(callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 3가지 currentValue : 현재 처리하고 있는 요소 index : 현재 요소의 index 값 array : 현재 처리하고 있는 원본 배열 var numbers=[1,2,3,4,5]; number.map(function(c,i,a){ console.log(c,i,a)}) 1 0 [1, 2, 3, 4, 5] 2 1 [1, 2, 3, 4, 5] 3 2 [1, 2, 3, 4, 5] 4 3 [1, 2, 3, 4, 5] 5 4 [1, 2, 3, 4, 5] 데이터 배열을 컴포넌트 배열로 변환 import React from "react..

(리액트를 다루는 기술) 5장 ref-dom에 이름 달기

5장. ref:DOM에 이름 달기 ref: HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 내부에서 DOM에 이름을 다는 방법 예제 자바스크립에서는 이벤트나 스타일 주려면 id나 class 지정 해야하지만 리액트는 굳이 그렇게 하지 않아도 됨 App.js; import React, { Component } from "react"; import ValidationSample from "./ValidationSample"; class App extends Component { render() { return ; } } export default App; import React, { Component } from "react"; import "./ValidationSample.css"; cla..

(리액트를 다루는 기술) 4장 이벤트 핸들링

Event 사용자가 웹 브라우저에서 DOM요소들과 상호 작용하는 것을 이벤트라고 한다. 리액트의 이벤트 시스템 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성(HTML의 onclick->리액트에서는 onClick) 리액트에서는 이벤트에 실행할 함수 형태의 객체를 전달 # 렌더링 부분 외부에서 만들어 전달해도 됨 const Say = () => { const [message,setMessage]=useState(''); const onClickEnter=()=>setMessage('안녕하세요') return ( 입장 {message} ); }; # 함수 형태 바로 전달해도 됨 const Say = () => { const [message,setMessage]=..

(리액트를 다루는 기술) 3장 Component

Component UI를 독립적이고 재사용 가능하도록 나눈 조각 props 컴포넌트 속성을 설정할 때 사용하는 요소 props 값은 해당 컴포넌트를 불러와 부모 컴포넌트에서 설정 MyComponent.jsx import React from 'react'; const MyComponent = props => { return ( 안녕하세요, 제 이름은 {props.name} 입니다 ); }; export default MyComponent; App.js import React,{Component} from 'react' import './App.css' import MyComponent from './MyComponent' class App exten..