이안의 평일코딩

지난 블로깅에서는 state를 저장하고 사용하는 방법만 알아보았고, 이번시간에는 데이터 수정하는 방법에 대해서 알아보도록 하자. reducer 함수 state 데이터의 수정방법을 미리 정의하는 함수이다. state 초기값과 데이터 수정방법을 넣는다. function reducer(state = 초기값, 액션) 1. '수량증가'라는 데이터 수정방법 이름을 작명해서 넣어준다. (액션.type === 수정방법이름) 2. if문 안에 '수량증가'라는 요청이 들어올 경우 else if문에는 '수량감소'라는 요청이 들어올 경우 수정방법 정의. 3. else문 안에는 둘 다 안들어온 경우 기본 state를 결과값으로 가져올 것을 수정방법 정의. index.js let 초기값 = [ {id: 0, name: '멋진신발..

Redux란? Redux라는 라이브러리는 모든 컴포넌트 파일들이 같은 값을 공유할 수 있는 저장공간을 생성가능케 해주고 state 데이터를 관리하는 기능을 가지고 있다. Redux를 쓰는 여러가지 이유 중 하나는 props 전송없이 모든 컴포넌트가 state를 가져다 쓰는 것이 가능하기 때문에 컴포넌트가 매우 깊숙히 있다면 state를 전달하기 위해 props를 수십번 써야하고 귀찮은데 redux를 세팅하면 Context API와 같이 props를 수십번 쓸 필요없이 바로 꺼내쓸 수 있게 해준다. 설치방법 터미널에 yarn add redux react-redux 를 쳐서 2개의 라이브러리를 설치한다. (또는 npm install redux react-redux) 세팅하기 index.js에 를 import..

리액트를 시작하다! 리액트 입문 수업으로 생활코딩을 이틀에 걸쳐 완강했다. (수업링크 : opentutorials.org/module/4058) TMI이지만 사실 국비 과정이 풀스택인줄 알았는데 강의 중간 쯤 알고보니 백엔드 반이라는 사실을 깨달았다. 1차, 2차, 3차 프로젝트를 거치면서 점점 백엔드보다는 프론트엔드에 강력한 매력을 느끼게 되었고 독학을 결심. 이 글은 생활코딩님의 리액트 강의를 듣고 복습 겸 다시 정리해보는 글이오니, 글의 설명이 부족하다고 느낀다면 위의 수업링크를 통해 한 번 수강할 것을 적극 추천하며, 복습용으로 또는 오랜만에 상기용으로 빠르게 훑고 싶은 분들을 위한 글이라고 생각하면 될 것같다. 개발환경 npm run start public > index.html (메인페이지) ..

constructor 컴포넌트가 새로 만들어질 때 호출 getDerivedStateFromProps props값을 state와 동기화시키고 싶을 때 shouldComponentUpdate 컴포넌트가 update할 지 말 지 정할 때 (false은 호출이 안되며 true일 때 호출됨) render 렌더 함수 호출 getSnapshotBeforeUpdate 실제로 브라우저에 반영되기 바로 직전에 값을 확일할 때 componentDidMount Mounting이 끝날 때 componentDidUpdate Updating이 끝날 때 componentWillUnmount Unmounting이 될 때 componentDidCatch 에러발생 시 잡을 때

2020.11.17(화) SpringAOPProject3 iancoding.tistory.com/120 Spring 15일차 - AOP 2020.11.17(화) mvnrepository.com/artifact/javax.validation/validation-api/2.0.1.Final Maven Repository: javax.validation » validation-api » 2.0.1.Final javax.validation validation-api 2.0.1.Final.. iancoding.tistory.com src/main/java com.sist.web ReactController package com.sist.web; import org.json.simple.JSONArray; impo..