이번엔 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)이다. 싱글 페이지 어플..
React포스팅 중 첫번째 포스팅인 jsx문법을 마치고 문법을 알았다면! 그다음에 아주아주 중요한!! 컴포넌트에 대해 써보자! 리액트로 만들어진 웹사이트 및 화면은 컴포넌트로 구성이 되어있기 때문에 리액트를 쓴다?? 하면 엄청나게 중요하다. 빡세게 기초부터 공부해두자!! 알아야쓰지... 리액트 컴포넌트가 뭐야?? 그쵸?? 알아야 쓰든가말든가 하죠 한번 알아봅시다!! 리액트 컴포넌트는 역할도 많고 이점이 상당히 많은 친구다 뭐... 한마디로 정해보면 리액트의 핵심 빌딩 블록중 하나 즉, 리액트에서 개발한 모든 애플리케이션은 컴포넌트라는 조각으로 구성이 된다. 그런 컴포넌트로 UI구축 작업을 훨씬 쉽게 만듬. 그리고, "props"라는 임의의 입력을 받고 화면에 어떻게 표시되는지 기술하는 리액트 엘리먼트를 ..
