리덕스란? 리덕스 공홈에선 리덕스를 이렇게 설명하고 있다. Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와준다. 이게 무슨소리...?? 그냥 쉽게 데이터를 중앙집권화를 시켜서 데이터 사용 및 관리를 편하게 만들어주는 라이브러리 라고 생각하면된다. Redux에는 3가지의 원칙이 있다. 1. Single source of truth 동일한 데이터는 항상 같은곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미 2. State is read-only 리액트에서는 setState 메서드를 활용해야만 상태변경이 가능 리덕스에서도 액션이라는 객체를 통해서만 상태변경이 가능..
이번엔 react 훅 중에 useReducer 훅에 대해 포스팅이다. useReducer란?? - useState를 대체할 수 있는 함수. - 보통 React에서 상태 관리를 위해 가장 많이쓰는 훅은 useState다. - 하지만 더 복잡한 상태관리를 해야할 경우에는 useReducer 훅을 사용 useReducer의 구조 import React, { useReducer } from "react"; const [state, dispatch] = useReducer(reducer, initialState, init) state : 컴포넌트에서 사용할 상태 dispatch 함수 : state 업데이트를 위한 요구 - 첫번째 인자인 reducer를 실행시키는 함수 - 컴포넌트 내에서 state의 업데이트를 일..
map()을 보면, 처음 드는생각은 어?? 이거 자바스크립트 배열 내장메서드 아니야? 이걸로 리액트에서 뭘 어떻게할 수 있는데... 리액트에서 동적인 배열을 렌더링할 때, map()을 이용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 반환 실제로, 리액트에서 배열은 게시글, 리스트, 피드 등등을 표시하는 등에 자주 사용되기 때문에 무조건 알아둬야한다!! 아래의 예제를 보면서, 배열을 이용하여 리액트에서 List렌더링을 해보고, 개별적인 컴포넌트를 만들어보자!! 1. DiaryList.jsx 먼저, 일기리스트 컴포넌트를 작성할 DiaryList.jsx파일을 만들어준다. 2. App.js 그다음, dummyList를 만들어 DiaryList에 prop으로 데이터를 전달한 후, 그 데이터를 리스트..
useState에 이어서 리액트 Hooks 중에서 가장 중요하다고 하는 useEffect에 대해서 알아보고 정리해보도록 하겠다. ⭐️ useEffect란?? useEffect Hook을 이용하여 우리가 React에게 컴포넌트가 렌더링 된 이후에 어떤일을 수행할지 정해줄수 있음. 또한, useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있음. 과거엔 클래스형 컴포넌트에서만 생명주기 메소드를 사용할 수 있었지만, 오늘날에는 이제 함수형 컴포넌트에서도 사용할 수 있음. 즉, (componentDidMount, componentDidUpdate, componentWillUnmount)라는 라이프사이클 훅을 대체할 수 있게 되었다. useEffect는 기본적으로 몇개의 조건에 ..
정말 화가나는 예비군훈련을 마치고 다시 현생으로 돌아오자마자 마주친건 state끌어올리기.... 생전 처음들어보았다. 그래서 이게 뭔지 알아보기위해 포스팅을 하려고한다. 👉🏻 상태 끌어올리기 처음엔 이게 뭘까.. 가만히 생각해보다가 멱살 끌어올리기밖에 생각이안나서 여기저기 찾아보았다. 상태 끌어올리기란 ?? 단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 타입이 무엇인지만 알 수 있다. 또한 데이터가 state로부터 왔는지, 하드코딩을 통해 입력된 내용인지도 모른다. 따라서, 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름" 처럼 느껴질 수 도 있다. 결국 상위 컴포넌트의 "상태를 변경하는 함수" 그자체를 ..
저번 포스팅에서 작성하였던 프로퍼티(props)는 컴포넌트 내부에서 값을 바꿀 수 없었다. 하지만 분명 컴포넌트에서 값을 바꿔야 할일이 있을터.... 그럼 그때 어떻게해야하나?? 그때는 state를 사용한다!! 💡 1. state가 뭘까?? 컴포넌트 내부의 동적인 데이터 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용한다. 현재 컴포넌트에서 생성, 변할 수 있는 데이터로 오직 state가 생성된 컴포넌트 내에서만 변경이 가능. 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용 즉, 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다. 상태(state)란 계속해서 동적으로 변화하는 특정 상태(=값) 상태(=값)에 따라 각각 다른 ..
저번 포스팅까지 페이지 이동에 대해 배웠다. 그럼 이제 페이지를 이동시킬 수는 있는데 상위 컴포넌트가 하위 컴포넌트에 값을 전달해줘야, 하위 컴포넌트가 그걸 받고, 렌더링을 해줄것이 아닌가!! 그걸 하기 위해서 props라는것이 필요한 것이다. 뉘에뉘에~~ 그거때문에 쓰는 건 알겠고, 그럼 어떻게 쓰는건가요!?? 👉🏻 Props(프로퍼티)란!?? Props= Properties 의 줄임말이라고 생각하면 된다. 위의 사진처럼 프로퍼티는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용. (단방향 데이터 흐름) 프로퍼티는 수정할 수 없다!! (자식입장에선 읽기 전용) 함수에 전달하는 매개변수 ❓ 그럼 Props를 어떻게 사용하나유 일단 jsx문법상으로 프로퍼티에 문자열을 전달할땐 (" "), 문자열 외의..
오늘 배운 것은 리액트 라우터!! 사실 JSX에 익숙해지기도 전에 벌써 페이지 이동을...?? 나 이래도 되는걸까..? 지금까지 앞에서 JSX를 쓰는법과, 구조를 나눠서 작성하는 컴포넌트까지 배웠다. 이제 그 컴포넌트들을 연결해서 페이지 이동을 시켜봐야 하지않겠나!?? 🔗 라우팅..?? 샤우팅은 알아도 라우팅은 뭐야... 누가 나에게 라우팅이 뭐야?? 라고 물었을 때 나는 이렇게 대답할 것 같다. 사용자가 요청을 한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 리액트 라우터는 라우팅을 하기 위한 사용도구!! 라고 생각 일단, 라우팅이 왜 필요한지 알아야 쓰지... 그걸 알기 위해서는 SPA에 대해 알아야한다. 리액트는 SPA (Single Page Application)이다. 싱글 페이지 어플..
