[30] 리액트 리덕스 # 1

리덕스 ? 리액트에서 사용률이 높은 상태관리 라이브러리이다. 상태관련 로직들을 다른파일로 분리하여 효율적으로 관리 할수있으며 글로벌 상태 관리도 쉽게 할수있다. Context API 와 useReducer Hook 을 사용해서 개발하는 흐름과 리덕스는 굉장히 유사 하다. Context API 와 차이점 ? 1. 미들웨어 리덕스에는 미들웨어라는 개념이 있다. 미들웨어를 통해서 액션 객체가 리듀서에서 처리되기 전에 원하는 작업을 수행할수있도록 만들수있다. 특정 조건에따라 액션이 무시됨 액션을 콘솔에 출력하거나 , 서버에 로깅할수있음 액션이 디스패치됐을대 이를 수정해서 리듀서에 전달할수있음 특정 액션이 발생했을때 다른액션을 발생하게할수있음 특정 액션이 발생했을때 특정자바스크립트 함수를 실행시킬수있다. 주로 비..

• format_list_bulleted 프론트엔드/React
• · 2022. 12. 13.
• textsms

[29] 리액트 useEffect

useEffect ? 컴포넌트가 렌더링될때 특정작업을 실행할수있도록 하는 훅이다. 클래스형 컴포넌트에서는 생명주기 메소드를 사용하여 이용할수있는데 함수형 컴포넌트에서는 useEffect를 사용하면된다. useEffect[ 함수 , 의존성배열] 첫번째인자 : 함수 리액트는 렌더링 이후에 실행할 함수( useEffect 첫번째 인자 ) 를 가지고있다 DOM 업데이트 이후 불러내게된다. 만약 첫번째 인자 함수에서 return 하게되면 그 함수가 컴포넌트 unmount 될때 실행되게된다. → 이것을 이용해서 cleanUp 함수를 작성할수도있다 두번째인자 : 의존성 배열 배열의 형태로 특정한 값이 변경될때 첫번째인자 즉 useEffect 함수를 실행시키고싶을경우 그값을 넣어준다. 예를들어 input 값안에 들어있..

• format_list_bulleted 프론트엔드/React
• · 2022. 12. 9.
• textsms

[28]리액트 ref 와 state

ref ? 컴포넌트 라이프사이클내 유지되며, 변경가능한 변수이고 값이 변할때 렌더링이되지 특징을 가지고있으며 주로 DOM 엘리먼트에 접근하여 컴폰너트의 전체 렌더링과 관계없는 작업을 할때 유용하게 사용된다. ref 와 state ref 의 특징을보면 state 와 유사한부분이있다. state 는 컴포넌트 라이프 사이클내에서 유지가되며 , 변경가능한 변수이고 , 값이 변할때 렌더링이된다는 특징이있다. 간단하게 리렌더링이 필요한 값을 다룰때는 state 를 , 아닐때는 ref를 사용한다고 보면 된다. import React, { useRef, useState } from "react"; import { Card } from "../UI/Card"; import classes from "./AddUser.mo..

• format_list_bulleted 프론트엔드/React
• · 2022. 12. 9.
• textsms

[27] 리액트 동적스타일

동적스타일 어떤 조건에 맞는 스타일속성을 지정해줄때가있다. 이런 동적인스타일을 적용시키는데에는 여러가지 방법이 존재하는데 크게 해당 요소에 인라인속성을줘서 주는방법이있고 미리 클래스에 스타일을 적용시킨다음에 해당조건에맞으면 클래스이름을 주거나 삭제시키는 방법으로 할수도있다. import React, { useState } from "react"; import Button from "../../UI/Button/Button"; import "./CourseInput.css"; const CourseInput = (props) => { const [enteredValue, setEnteredValue] = useState(""); const [isValid, setIsValid] = useState(true..

• format_list_bulleted 프론트엔드/React
• · 2022. 12. 8.
• textsms

[26] 리액트 상태 끌어올리기

리액트는 부모에서 자식 컴포넌트로 데이터를 내려주는것을 props 로 해왔다 그럼 자식에서 부모로 데이터를 이동시켜야할때는 어떻게 할까? 만약에 글작성하는 컴포넌트와 글을 보여주는 컴포넌트가 있다고 가정해봤을때 글작성에서 데이터를 입력받아 해당 데이터를 보여주는 컴포넌트로 이동할때 부모와 자식간의 구조가 아니라면 어떻게 처리를 해야될까? 부모컴포넌트에 함수를 선언하고 해당함수를 props 로 자식컴포넌트에 넘긴다 그리고 그 자식컴포넌트는 해당함수의 매개변수를 통해 전달하면 자식컴포넌트에서 부모컴포넌트로 데이터를 이동시킬수있다! 이를 코드로 한번 살펴보자 // 부모컴포넌트 const NewExpense = (props) => { // 데이터를 받기위한 함수 생성 const saveExpenseDateHan..

• format_list_bulleted 프론트엔드/React
• · 2022. 12. 6.
• textsms

[25] react 의 JSX

궁금증 리액트 create react app 의 JSX 문법은 개발자가 보기편하게 만들어준다. 근데 가끔은 리액트 컴포넌트를 보면 return 밑으로 작성된 JSX 의 코드가 원래는 어떻게 동작할까 ? 라는 의문이 들때가있다. 또한 상위요소가 필수적으로 하나가 필요해야되는 이유가 무엇인지 궁금했고, 원래는 어떤 코드였고 JSX 를통해서 보기좋게 변하게됬는지 ? 간단하게 알아보자. 먼저 기본적으로 간단한 컴포넌트를 보자. function Example() { return ( hi $1000 ); } 컴포넌트에 상위div 태그 안에 h2, div 를 나타내고있다. JSX 를 통해 상당히 개발자가 보기 편한대 아주 이전의 리액트에서는 다르게 표시했었다. import React from 'react&#3..

• format_list_bulleted 프론트엔드/React
• · 2022. 12. 5.
• textsms