Dev. MK Dev. MK

React 리액트

• React Redux 리액트 리덕스란?

  React 리액트 2023. 9. 21. 14:25

  리덕스란 JavaScript 상태관리 라이브러리이다. 리덕스의 본질은 Node.js 모듈이다. 리덕스는 쉽게 설명하면 상태 관리의 로직을 컴포넌트 밖에서 처리 하는 것이다. 리덕스를 사용하면 스토어라는 개체 내부에 상태를 담게 된다. 액션(Action) : 상태 변화를 일으킬 때 참조하는 객체이다. - const mapActionToProps = (dispatch) => { } 함수 사용 - Action이라는 단어는 Event와 같다고 생각하면 된다. - dispatch 인수에서 Ruduce로 넘길 객체(type)를 정의한다. - Action이 실행되고 끝나면 type을 반환하는데 type은 Reduce로 전달된다. 스토어(Store) : 애플리케이션의 상태 값들을 내장하고 있다. - 리덕스에서는 단 하..

  Read More
• 컴포넌트(6) 이벤트 핸들러 Event Handler

  React 리액트 2023. 9. 7. 16:34

  1. 컴포넌트에서 DOM 이벤트 사용 - 컴포넌트에서 출력된 특정 DOM 객체에 이벤트 컴포넌트가 동작하기 위해선 DOM이벤트 프로퍼티를 사용해야 한다. - HTML 기존 형식을 카멜식 표기로 변경해서 사용한다. onclick => onClick onkeyup => onKeyUp ="" 안에 함수를 쓰는 게 아니라, {}안에 쓴다. onClick="changeName()" (x) onClick={changeName} (o) ex) import React, { useState } from 'react'; const Main = () => { const [ myName, setMyName ] = useState("Dev.MK") function changeName() { setMyName(myName ===..

  Read More
• 컴포넌트(5) 리액트 훅(react hook)사용 - useReducer

  React 리액트 2023. 9. 7. 11:18

  1. useReducer 훅이란? - useReducer은 상태를 관리하고 업데이트하는 훅인 useState를 대체할 수 있는 함수이다. - 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리시키는 것이 가능하여 코드의 최적화 할 수 있다. 기본형 const [state, dispatch] = useReducer(reducer, initialState); state : 현재 상태 dispatch : action을 발생시키는 함수 reducer : state와 action를 받아 새로운 state를 반환하는 함수 initialState : 초기값 같은 로직을 각각 useState훅과 useReducer를 사용하여 비교해보는게 이해가 빠르다. App.js import Counte..

  Read More
• 컴포넌트(4) 리액트 훅(react hook)사용 - useEffect

  React 리액트 2023. 9. 6. 15:27

  useEffect란? - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. - useEffect 이후에(마운트 해제되는 때) clean-up (정리)를 실행할 수 있다. 기본형태 // 첫 번째 인자로는 effect 함수, 두 번째 인자로는 dependency array useEffect(() => { console.log('useEffect가 실행되면서 렌더링.') // effect 이후에 어떻게 정리(clean-up)할 것인지 표시 return () => { .... // useEffect 종료되면 실행. } }, []) // 빈 배열을 입력하는 경우 렌더링 될 때 마다 실행 App.js import Main from './component/Main'; import './App..

  Read More
• 컴포넌트(3) 리액트 훅(react hook)사용 - useState

  React 리액트 2023. 9. 5. 16:37

  리액트 훅 (react hook) 이란? - 리액트의 훅은 16.8 버전부터 새로 추가된 기능이다. Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 [연동(hook into)]할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해준다. state란? - 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용하고 동적인 값을 상태(state)라고 부른다. useState란? - 리액트의 훅중 하나이며 현재의 state 값과 state 값을 업데이트하는 함수를 반환하는 함수다. 일반적으로 함수 내의 변수는 함수가 종료되면 사라지지만, useState 를 사용해 변수의 ..

  Read More
• 컴포넌트(2) props (properties) 사용법

  React 리액트 2023. 9. 4. 15:13

  1. 프로퍼티(props)란? - 프로퍼티, props(properties의 줄임말) 라고 한다. - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다. (단방향 데이터 흐름 갖는다.) - 프로퍼티는 수정할 수 없다는 특징이 있다. (자식입장에선 읽기 전용인 데이터이다.) src/App.js import React, { Component } from 'react'; // 리액트를 구현할 수 있는 플러그인을 연결 import Header from './component/Header'; import Footer from './component/Footer'; import Main from './component/Main'; // JS파일에 외부 파일을 불러오는 것이기 때문에 "import" 키워드를 사..

  Read More
• 컴포넌트(1) 함수/클래스형 컴포넌트

  React 리액트 2023. 9. 3. 21:12

  1) 함수형 컴포넌트 (Stateless Functional Component) - 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다. - 여기서 import시 js, jsx 등 파일 확장자를 생략해도 자동으로 찾을 수 있다. 이는 "웹팩 코드 검색 확장자(webpack module resolution)" 기능 때문이다. 확장자가 파일 이름에 없는 경우 웹팩의 확장자 옵션(extentions)에 정의된 확장자 목록을 통해 확장자 이름을 포함한 파일이 있는지 확인하여 자동으로 임포트 한다. function Footer(props) { return ( 푸터입니다. ); } 2) 클래스형 컴포넌트 ( Class Component ) - 컴포넌트 구성 요소, 리액트 생명주기를 모두 포..

  Read More