DAN'S 기술블로그

❓ 리덕스는 무엇인가 리덕스는 상태관리 라이브러리다. 상태관리 로직을 분리시켜서 효율적으로 관리할 수도 있고, 전역 값 관리도 손쉽게 할 수 있다. 하지만 모든 경우에 리덕스를 사용할 필요는 없다. 관리해야 할 전역 값이 별로 없다면 (state가 많이 변경되지 않는다면) ContextAPI를 써도 좋다. (https://actually-i-am.tistory.com/56) 프로젝트의 규모가 크거나 (관리해야 할 전역값이 자주 변경되거나), 비동기 작업이 자주 필요하다면 리덕스 사용을 고려해보자. 👍 리액트에서 리덕스로 상태관리 하는 장점 미들웨어 비동기 작업을 더욱 체계적으로 관리 가능 유용한 함수와, Hooks를 지원받을 수 있다. ContextAPI는 직접 만들어서 썼다 리덕스 툴킷같은거 ex. c..

🙄 왜 사용하나요? props drilling을 방지하기 위함이다. Props drilling이란? 부모로 해당 props를 사용할 자식 컴포넌트로 전달하면서, 그 중간에서 props를 사용하지 않음에도 불구하고 props를 전달하는 것을 말한다. 그림으로 그리면 위와 같다. 중간 컴포넌트는 props를 사용하지 않으면서도 props를 전달하기 위해서 props가 거쳐가야 한다는 문제점이 있다. props가 무엇이냐면 : https://actually-i-am.tistory.com/47 리액트의 기초 - props 이전 포스트 : https://actually-i-am.tistory.com/46 리액트의 기초 - 컴포넌트와 JSX 리액트를 간단하게 설명하자면 컴포넌트들이라고 할 수 있다. 컴포넌트는 무엇..

useReducer란? useReducer는 상태관리를 도와주는 리액트 훅이다. useState와 다른 점 기능이 더 많고 복잡한 상태일 때 유용하다. state의 조각들이 여러개 함께 사용될 때 적합하다. 위와 같은 장점이 있지만 기능이 강력하다고 항상 좋지는 않다. 왜냐하면 useState에 비해 코드가 무거워지기 때문이다. 사용법 const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn) state : 현재 상태의 스냅샷 dispatchFn : 상태를 업데이트 해주는 함수 상태값을 설정하는 대신, 하나의 액션을 dispatch하게 된다. ** (dispatch - 보내다) 그리고 보내진 것은 reducerFn에서 사용된다 redu..

useEffect 훅을 사용하면 컴포넌트가 마운트, 언마운트, 업데이트 시 할 작업을 설정할 수 있다. (마운드, 언마운트는 각각 컴포넌트가 나타나고 사라지는 것을 말한다.) 이를 이용해 애플리케이션 내에서 벌어지는 사이트 이펙트 (리액트의 관심사가 아닌 것)를 제어할 수 있게 된다. useEffect가 필요한 이유 예를들어 페이지에 접속했을 때, get요청으로 데이터를 받아와 화면에 보여주는 컴포넌트가 있다고 해보자. 이런 기능은 get요청을 받은 다음에 화면에 뿌려줘야 하기 때문에 데이터를 state로 처리한다. 그런데 useEffect가 없다면 state가 변경될 때마다 계속 다시 컴포넌트 함수가 실행될 것이다. 컴포넌트 함수가 실행되면 다시 get요청을 하고, 다시 받아온 데이터로 state변경이..

React에서 form 양식을 입력받는 방법 중 하나로 useRef를 사용할 수 있다. useRef를 통해서 DOM을 선택하고, 해당 DOM의 value를 받아노는 방법이다 사용법은 아래와 같다. React의 기능 중 하나인 useRef를 불러오고 객체를 생성하여 변수에 담는다. 생성한 객체를 원하는 태그의 속성 ref의 값으로 넣는다. 변수명.current 로 해당 DOM을 불러올 수 있다. 주의사항으로 이렇게 불러온 DOM을 직접 조작하면 안 된다는 것이다. 리액트에서 화면에 출력되는 것을 바꾸고 싶다면 state를 변경해야 한다.

https://actually-i-am.tistory.com/47 리액트의 기초 - props 이전 포스트 : https://actually-i-am.tistory.com/46 리액트의 기초 - 컴포넌트와 JSX 리액트를 간단하게 설명하자면 컴포넌트들이라고 할 수 있다. 컴포넌트는 무엇인가 그렇다면 컴포넌트는 무엇인가? 그 actually-i-am.tistory.com props는 컴포넌트를 쓰면서 특정값을 전달해주고 싶을 때 사용한다. 그리고 그 특정값으로 JSX를 넘길 수도 있다. 특별한 props인 children을 사용하면 가능하다. 템플릿을 재사용하고 싶을 때 활용할 수 있다. 사용 예시는 아래와 같다. function App() { return ( ); } import React from 'r..

배열을 렌더링 하는 방법은 배열 안에 JSX코드를 넣는 것이다. map메서드 등을 사용하면 쉽게 만들 수 있다. 하지만 이런식으로 렌더링을 효과적으로 하기 위해서는 key라는 고유 속성값을 넣어줄 필요가 있다. import React from 'react'; function UserList(){ const users = [ { id : 1, username : '이름1', email: '1112xxx@xxxx.xxx' }, { id : 2, username : '이름2', email: '2223xxx@xxxx.xxx' }, { id : 3, username : '이름3', email: '33343xxx@xxxx.xxx' }, ]; return ( { users.map( user => () // key값으..

리액트 컴포넌트를 스타일링 하는 방법은 sass, css module, styled components 등의 방법이 있다. 그중 CSS 모듈은 기존 css파일이 특정 컴포넌트로 범위가 지정되도록 만든 것이다. css 모듈을 사용하면 class 이름이 중복되는 것을 방지할 수 있다. 사용 방법은 파일 확장자를 파일명.module.css로 만들어서 사용하면 된다. 이것이 브라우저에서 나타날때 코드가 변환되어서 컴포너트에 종속되도록 만들어 준다. 코드 예시는 아래와 같다. import REact from "react"; import styles from "./파일명.module.css" function Box(){ return {styles.Box} ; } export default Box; 레거시 프로젝트에..

라우팅이란 URL 주소에 따라 어떤 UI를 보여줄지 규칙을 정하는 작업을 말한다. 기본적으로 리액트는 component에 기능이 중점되어있기 때문에 라우팅을 하기 위해서는 다른 회사의 라이브러리를 추가해야 한다. 많이 사용되는 라이브러리는 react-router-dom이다. Route 사용법 기본적인 사용법은 아래와 같다. 패키지 설치 : npm install react-router-dom 설치한 패키지를 import해서 그 안의 BrowserRouter로 라우팅 할 컴포넌트를 감싸준다. (최상위 컴포넌트를 감싸주면 된다) 라우터를 사용할 컴포넌트에서 Router를 import해서 사용하면 된다. Router의 사용법이 5버전에서 6버전으로 넘어가면서 꽤 바꼈다. 내 경우는 5버전 강의를 보면서 6버전을..

이전 포스트 : https://actually-i-am.tistory.com/46 리액트의 기초 - 컴포넌트와 JSX 리액트를 간단하게 설명하자면 컴포넌트들이라고 할 수 있다. 컴포넌트는 무엇인가 그렇다면 컴포넌트는 무엇인가? 그것을 알기 전에 react는 결국 UI를 만들어주기 위한 도구라는 것을 환기해보 actually-i-am.tistory.com 이전 포스팅에서 컴포넌트는 재사용하기 좋다고 설명했지만 props없이는 무리가 있다. 이전 포스팅에서 정의했던 Hello컴포넌트를 다시 보자. 만약에 'Hello, 유저이름'과 같은 식으로 나타내고 싶다고 생각을 해주자. 3명의 이름을 부르려면 3개의 컴포넌트가 필요하다. 하지만 props를 사용한다면 아래 하나의 컴포넌트를 재사용 가능하다. import..