전체 글72 Redux(리덕스) Redux(리덕스) 리액트에서 가장 많이 사용하는 상태관리 라이브러리. 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리 할 수 있다. 단순히 전역 상태 관리만 한다면 Context API를 사용해도 되지만 대규모 프로젝트에서는 리덕스가 좋다. 유지 보수성을 높이고 작업 효율도 극대화 해주며, 미들웨어기능을 제공하여 비동기를 훨씬 효율적으로 관리 하게 해준다. 개념 정리 액션 상태에 어떠한 변화가 필요하면 액션(action)이라는 것이 발생. 액션 객체는 type 필드필수. 이 값이 액션의 이름이라 생각 하면 됨. { type: 'ADD_LIST' data: { id: 1, title: 'List 1' } } 액션 생성 함수 액션 객체를 만들어.. 2021. 8. 5. Context API Context API 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능으로 예를 들면, 사용자 로그인정보, 애플리케이션 환경 설정, 테마 등이 있다. // Context 생성 import { createContext } from 'react'; const ColorContext = createContext({ color: 'gray' }); export default ColorContext; // 적용할 컴포넌트 import React, { useContext } from 'react'; import ColorContext from './color'; const ColorBox = () => { const { state } = u.. 2021. 8. 5. Hooks Hooks React v16.8에 도입된 기능으로 함수형 컴포넌트에서도 useState, useEffect 등의 기능을 제공하여 다양한 작업을 지원. useState 가장 기본적인 hook으로 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. useEffect 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정. componentDidMount + componentDidUpdate 라고 보면 된다. useReducer useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용 import React, { useEffect, useState, useReducer } from 'react'; function reducer (st.. 2021. 7. 20. 라이프사이클 메서드 라이프사이클 메서드(Lifecycle) 모든 리액트 컴포넌트에는 라이플사이클(수명주기)가 존재한다. 컴포넌트의 수명은 페이지에 랜더링 되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. 종류는 총 9가지. 'Will' : 작업을 작동하기 전, 'Did' : 작업을 작동한 후 그리고 3개의 카테고리로 나뉘는데 마운트 : 페이지에 컴포넌트가 나타남 업데이트 : 컴포넌트 정보를 업데이트 언마운트 : 페이지에서 컴포넌트가 사라짐 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라 한다. 호출되는 메서드 counstructor : 컴포넌트는 새로 만들때 마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 .. 2021. 7. 19. 컴포넌트 반복 컴포넌트 반복 코드를 작성하다보면 아래와 같이 반복되는 코드들이 생긴다. 닭 돼지 말 소 이런 상황에서는 map()함수를 사용하여 반복되는 컴포넌트를 랜더링 할 수 있다. map() arr.map(callback, [thisArg]) 기본구문 import React from 'react'; const Sample = () => { const names = ['닭', '돼지', '말', '소']; const namesList = names.mapp((name, index) => {name}); return {namesList}; }; export default Sample; 응용 import React, { useState } from.. 2021. 7. 16. ref:DOM(클래스형컴포넌트) ref HTML에서 각 DOM요소에 이름을 달아줄때에는 id를 사용한다. ex) 이와 비슷하게 React에서도 DOM에 이름을 달아주는데 이 때, ref를 사용한다. DOM요소에 ref달기 예제 컴포넌트 // ValiSample.css .success { background-color: lightgreen; } .failure { background-color: lightcoral; } // ValiSample.js import React, { Component } from 'react'; import './ValiSample.css'; class ValiSample extends Component { state = { password: '', clicked: .. 2021. 7. 15. 이벤트 핸들링 이벤트 핸들링 이벤트 : 사용자가 웹 브라우저에서 DOM요소들과 상호작용 하는 것. import React, {useState} from 'react'; const Glory = () => { const [message, setMessage] = useState(''); const onClickEnter = () => setMessage('안녕하세요'); const onClickLeave = () => setMessage('안녕하가세요'); return ( 입장 퇴장 {message} ); }; export default Glory; 리액트에서 이벤트에 관한 코딩이다. 주의사항 카멜표기법으로 작성.ex) onclick -> onClick, onke.. 2021. 7. 14. props / state props 컴포넌트 속성을 설정할때 사용하는 요소 { }로 감싸서 사용. import React from 'react'; const MyComponent = props => { return 오늘의 메뉴는 {props.menu}입니다. }; export default MyComponent; // 부모컴포넌트에서 props값 지정 import React from 'react'; const App = () => { return ; }; export default App; 위 내용처럼 작성하면 "오늘의 메뉴는 삼계탕입니다." 라는 내용으로 출력된다 props 기본값 설정하기 : defaultProps 위 코드에서 menu='삼계탕'을 지우면 화면에는 "오늘의 메뉴는 입.. 2021. 7. 14. Component 컴포넌트 React에서 가장 두드러 지는 특징 중 하나로서 쉽게 생각하면 레고에서 블럭 한개와 비슷하다고 보면 된다. 컴포넌트의 종류에는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉘어 진다. 클래스형 컴포넌트 클래스형에서는 render()가 필수적. 선언하기 편하며 메모리도 덜 사용. import React , {Component} from 'react'; class App extends Component { render() { const name = 'react'; return {name} } } export default App; 함수형 컴포넌트 state와 LifeSycleAPI 사용이 불가했지만 v16.8 업데이트 이후 Hooks이 생기며 해결됨. React 공식메뉴얼에.. 2021. 7. 14. 이전 1 2 3 4 ··· 8 다음
