Next-BlockChain

리덕스 프로젝트에서 사용하게 될 때 꼭 지켜야하는 3가지 규칙 1. 하나의 애플리케이션 안에는 하나의 스토어가 있다. 여러개의 스토어를 사용하는 것은 가능하지만 권장되지 않는다. 그러나 이럴 경우 개발도구를 활용하지 못합니다. 2. 상태는 읽기전용이다. 리액트에서 상태 업데이트를 할 때 기존의 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 하는데 리덕스도 마찬가지로 기존상태는 건드리지 않고 새로운 상태를 생성해서 업데이트하면 나중에 개발자 도구를 통해 앞이나 뒤로 돌릴 수 있다. 리덕스에서 불변성을 유지해야하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 shallow equality 검사(React-Redux는 shallow equality를 사용하여 래핑하는 구성..

Web/React 2023. 1. 22. 22:17

액션(Action) 상태변화가 필요할 때 액션을 발생시킴 주로 객체로 표현되며 다음과 같음, 액션 객체는 type 필드를 필수로 가져야 하며 그 외 값들은 개발자 마음임 { type: "TOGGLE_VALUE" } { type: "ADD_TODO", data: { id: 0, text: "리덕스 배우기" } } { type: "CHANGE_INPUT", text: "안녕하세요" } 액션 생성함수(Action Creation) 액션 생성함수는 액션을 만드는 함수다. 파라미터를 받아서 액션객체로 만들어줌 function export function addTodo(data) { return { type: "ADD_TODO", data }; } 화살표 함수형태 export const changeInput = t..

Web/React 2023. 1. 22. 16:42

useEffect는 리액트 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 Hook입니다. 이 컴포넌트에서 실행하는 Side Effect는 브라우저 API를 이용해서 타이틀을 변경하는 것입니다. 다음 코드가 예시입니다. 클릭할 때마다 브라우저 탭이 변경됩니다. import { useEffect, useState } from "react"; import "./styles.css"; export default function App() { //배열에 곡을 저장 const proverbs = [ "bts - 다이너마이트 ", "비오 카운팅스타", "지코 아무노래 ", "리쌍 광대 ", "다듀 출첵" ]; // idx 초기값과 setIdx 업데이트함수를 선언하고 useState의 디폴트 값은 0으로..

Web/React 2023. 1. 9. 16:29

Side Effect 부수효과 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기 합니다. 즉 Side Effect라는 말을 할 때는 "의도하지 않은 결과"를 의미합니다. 의도하지 않게 외부변수를 참조하거나 외부변수를 변경하는 모든 종류의 코드를 의미합니다. 다음은 전역 변수 foo를 bar라는 함수가 수정하는 예제입니다. Side Effect의 예시로 보면 될 것 같습니다. let foo = 'hello' function bar(){ foo='world'; } bar() // bar는 side effect를 발생시킵니다. Pure Function (순수 함수) 순수함수는 무엇일까요? 순수함수란 오직 함수의 입력만이 함수의 출력 결과에 영향을 주는 ..

Web/React 2023. 1. 9. 15:52

자바스크립트에서 배열 안의 요소가 1개 또는 2개라면 하드코딩으로 {}표현식을 이용해서 표현해도 될것입니다. 하지만 배열 안의 요소가 100개, 1000개라면 어떨가요?? 이럴 경우에 하드코딩을 하는 것은 바보같은 짓입니다. 그래서 이런 경우에는 자바스크립트의 고차함수인 map을 사용하면 간단히 해결할 수 있습니다. 고차함수 map의 특징은 다음과 같습니다. 배열의 각 요소를 특정 논리(함수)에 의해 다른 요소로 지정(map)합니다. map의 디테일한 사항은 여기 mdn에서 보실 수 있습니다. 다음 코드를 예시로 들면 posts요소는 id, title, content로 나눌 수 있습니다. 여기서 map 메소드 사용시 key를 써야하는데 가장 적절한 데이터는 id입니다. 이유는 데이터마다 분별할 수 있고 ..

Web/React 2023. 1. 1. 15:38

JSX JSX란 JavaScript XML의 줄임말로 React에서 쓰는 JavaScript 문법입니다. 이 JSX를 이용해서 보통 UI를 구성하고 React Element를 만들 수 있습니다. 그렇다면 JSX만 있다고 바로 Javascript를 실행할 수 있을까요? 안됩니다. 그렇다면 어떻게 브라우저에서 해석할까요?? 바로 Babel이 React의 JSX를 우리가 아는 Javascript로 컴파일 해줍니다. JSX의 컴파일 순서는 다음과 같습니다. JSX --->>> Babel(Compile) --->>> JavaScript --->>> Browser(Chrome, Firefox, Edge) React는 DOM과 다르게 JSX와 CSS만으로도 웹앱을 개발할 수 있습니다. 또 DOM 코드보다 좀 더 직관..

Web/React 2022. 12. 20. 22:53