본문 바로가기

IT/React21

리덕스 액션 : 상태에 어떤 변화가 필요하면 액션이라는 것이 발생하며, 이는 하나의 객체로 표현된다. 액션 객체는 반드시 type 필드를 가지고 있어야 하며, 이 값은 액션의 이름. 액션 생성함수 : 액션객체를 만들어 주는 함수 리듀서 : 변화를 일으키는 함수, 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아오며, 두값을 참고하여 새로운 상태를 만들어서 반환 스토어 : 프로젝트에 리덕스를 적요하기 위해 만들며, 한개의 프로젝트는 단 하나의 스토어만 가질 수 있다. 디스패치 : 스토어의 내장함수 중 하나이며, 액션을 발생시키는 것이다. 구독 : 스토어의 내장함수 중 하나이며, subcribe 함수 안에 리스너 함수를 파라미터로 넣어 호출해주면, 리스너 함수가 액션이 디스패치되.. 2019. 11. 19.
SPA SPA(Single Page Application) : 한개의 페이지로 이루어진 어플리케이션 기존의 어플리케이션은 서버에서 html을 만들어 제공하는 등의 형식으로 페이지 이동시마다 html을 받아오고 화면에 보여주는 형태였지만 서버에 과부하가 걸릴 위험성이 있다. 리액트는 뷰 렌더링을 사용자의 브라우저가 담당하도록 하며, 어플리케이션을 브라우저에서 불러와서 실행시킨 후 사용자와 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용해 업데이트하며 새로운 데이터가 필요하다면 서버 API를 호출하여 필요하 데이터만 불러와서 사용. 싱글페이지라고 해서 화면이 한개인것은 아니다. 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소상태에 따라 다양한 화면을 보여줄 수 있다. 라우팅 : 다른 주소에 .. 2019. 11. 18.
immer immer 라이브러리 사용시 구조가 복잡한 객체도 쉽고 짧은 코드를 사용하여 불변성 유지하며 업데이트 해줄수 있다. import produce from 'immer'; const nestState = produce(originalState, draft) => { //바꾸고 싶은 값 바꾸기 draft.somwhere.depp.inside = 5; }) produce라는 함수는 두가지 파라미터를 받는데 첫번째 파라미터느 ㄴ수정하고 싶은 대상, 두번째 파라미터는 상태를 어떻게 업데이트 할지 정의하는 함수 2019. 11. 18.
스타일링 일반 CSS : 컴포넌트를 스타일링하는 기본적인 방식 Sass : 자주사용회는 CSS전처리기중 하나로 확장된 CSS문법을 사용하여 코드 작성을 도와준다. CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션, CSS Module이 적용된 파이릉ㄹ 불러오면 객체를 전달받게 되며 CSS Module에서 사용한 클래스 이름과 해당 이르을 고유화한 값이 키 - 값 형태로 들어있다. ex) { wrapper:"CSSModule_wrapper_1SbdQ" } 위의 코드에서 `(백틱)을 사용하였다. styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 .. 2019. 11. 7.