본문 바로가기

React49

useContext 훅의 사용, 동적 컨텍스트, hook의 규칙 등 useContext 훅을 사용해서 코드를 간결하게 만들어보기 어제 컨텍스트 API를 처음 사용해보면서 자식 컴포넌트에 상태값을 사용하려고 Consumer 생성자 속에 기존의 반환문을 옮겨서 값을 불러왔었다. 만들고나니 사용법은 맞는 것 같긴한데, 뭔가 좀 지저분해 보이고 다른 방법이 있을 것 같았는데, 오늘 그것을 배웠다. 리액트 라이브러리에 있는 useContext 훅을 사용하는 것인데, 코드를 좀 더 간결하게 만들어준다. 우선 리액트 라이브러리에서 useContext 훅을 불러오고, 기존의 함수 내에서 Authcontext.Consumer를 삭제했다. 그리고 context의 줄임말 ctx라 명명한 상수에 useContext 훅을 사용하여 값으로 상태값이 저장되어 있는 AuthContext를 지정해주었.. 2023. 5. 19.
복잡한 상태 관리, 리액트 컨텍스트 API 복잡한 상태 관리 리액트로 웹사이트를 만들다보면 코드가 점점 방대해지고, 상태관리도 점점 무거워지게 된다. 이런 경우에 한 곳에서 모든 상태를 관리하면 웹사이트 구축이 좀 더 수월해지게 된다. 리액트의 useReducer 훅이 이 경우에 쓰이게 된다. 이 훅은 useState처럼 상태와 상태를 변경하는 함수인 dispatch를 반환한다. 이 dispatch 함수를 사용하여 액션을 전달하면 reducer 함수가 실행되고 새로운 상태가 반환되는 원리이다. useReducer 훅은 복잡한 상태관리뿐만 아니라 상태가 여러 값으로 구성되어 있고, 한 번에 여러 값이 동시에 업데이트되어야 하는 경우 사용하면 여러 값을 일괄적으로 업데이트할 수 있어 편리하다. 또, 상태 변화에 따라 여러 로직을 처리해야할 경우, u.. 2023. 5. 18.
useEffect의 사용, useEffect 훅의 종속성, cleanup 함수 useEffect 훅의 사용과 종속성 useEffect 훅은 리액트 컴포넌트에서 사이드 이펙트를 수행하기 위해 사용된다. 사이드 이펙트란 예를 들면 HTTP 요청을 보내는 것, 브라우저 저장소에 무언가를 저장하는 것, 코드에서 타이머나 간격을 설정하는 것 등이 있다. 이 useEffect 훅은 컴포넌트가 렌더링되거나 업데이트될 때 특정 동작을 수행하도록 설정할 수 있다. 사용 시에 두 가지의 인자를 사용하게 되는데, 첫 번째는 모든 컴포넌트의 평가 후에 실행되어야 하는 함수이고, 두 번째는 종속성으로 구성된 배열이다. 위 이미지의 코드는 훅의 사용을 위해 useEffect를 리액트 라이브러리에서 불러온 것과 두 개의 인자를 가진 useEffect 코드를 보여주고 있다. 위 코드에서 첫 번째 인자는 ide.. 2023. 5. 17.
프래그먼트 작업, wrapper로 감싸기, Portals, Ref JSX코드의 제한사항을 해결하는 여러 방법 리액트를 사용하며 두 개 이상의 요소를 사용할 때는 JSX 코드의 제한사항에 의해 한 개의 요소만 반환해야 한다. 그래서 만약 한 컴포넌트 파일에 h2와 p 요소가 있다면 이 두 개를 하나의 div나 다른 요소 안에 넣어 반환을 하는 식으로 사용하게 된다. 이렇게 하는 것은 일반적인 해결방법이긴 하지만, 웹사이트 전체를 들여다봤을 때 수많은 div가 렌더링되는 모습을 볼 수 있다. 이를 div 수프라고 불리는데, 여러 div 중에 불필요한 요소가 있을 수 있기에 이를 해결해줄 필요가 있다. 이를 위해 helper라 명명한 폴더 내에 직접 받은 자식요소만 반환하는 Wrapper라는 파일을 만들어 활용할 수 있다. 이 파일은 사실상 아무것도 없는 파일이기에 다른 컴.. 2023. 5. 17.
리액트 연습프로젝트로 기초사항 복습하기 리액트 연습프로젝트 오늘은 지금까지 배운 내용들을 한번씩 복습할 수 있는 연습용 프로젝트를 만들어보았다. 어제부터 만든 것이지만, 어제 막히는 부분에서 해결하기까지 시간이 너무 오래 걸려서 글을 올릴 수가 없었다. 막히는 부분은 역시 로직을 만드는 구간이었는데, 해결과정에서 수업을 참고해보니 생각보다 간단하게 해결되어서 놀랐다. 이런 몇가지의 문제들을 해결한 시간이 새벽 2시쯤이었으니, 나는 뭔가 막히면 새벽에 해결해야하나 생각이 들었다. 위 이미지가 새로 만든 연습용 웹사이트이다. 구조는 매우 간단하며, 이름과 나이를 사용자가 입력하면 아래에 리스트에 추가되는 페이지이다. 또, 이번에는 공백으로 제출되거나 나이가 0보다 작게 입력되어 제출되면 다시 확인하라는 오버레이창이 뜨도록 해보았다. 이 웹페이지는.. 2023. 5. 16.
리액트 컴포넌트에 css 스타일링하는 여러 방법 첫 번째 방법 - 인라인 스타일로 스타일링하기 리액트 컴포넌트에 스타일링하는 방법으로는 인라인 방식으로 하는 방법이 있다. 이는 HTML 코드에 style 속성을 사용하여 인라인으로 스타일링하는 방법과 같은데, 표현방식이 다르다고 보면 된다. 위 코드는 오늘 수업을 하며 진행한 연습용 웹페이지의 사용자 입력양식 코드 중 일부이다. 여기서 isValid는 기본값이 true로 되어있으며, 사용자가 공백으로 제출했을 때 제출이 되지 않도록 하는 역할을 하는 함수의 상태값이다. 만약 공백으로 제출됐을 때 label의 글자색을 빨갛게 바꾸기 위해 추가한 것이다. 여기서는 자바스크립트의 삼항 연산자와 함께 사용했는데, label에는 만약 상태값이 false, 즉 공백으로 제출됐다면 글자색을 빨갛게 설정하고, 그렇지.. 2023. 5. 12.

티스토리툴바