작심삼일 개발이야기

useRef에 대해 공부하던 중 useRef는 Ref를 쉽게 사용할 수 있게 해준다고 한다. 그럼 Ref란 무엇인가? Ref 리액트에서 부모, 자식 컴포넌트 사이에서 상호작용할 수 있는 유일한 수단은 props이다. 자식을 수정하려면 props를 전달해서 자식을 다시 렌더링해야 한다. 하지만 Ref를 사용하면 자식에 대해 직접적으로 접근할 수 있다. React 공식문서에서 Ref의 바람직한 사용 사례 3가지가 있다. 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 하지만 Ref를 남용하지 말라고 한다.

useRef가 내가 모르는 기능을 가지고 있다는 얘기를 듣고 검색해보고 적는다.. 끄적끄적모르는 게 끝이 없다....클래스형 컴포넌트와 함수형 컴포넌트에서 사용법이 조금 다르다. 함수형만 사용해보아서 함수형으로 정리를 해보았다. ref에 대해 (소소하게) 정리한 글도 있으니 참고.ref란? useRef에서 Ref가 궁금하다.useRef에 대해 공부하던 중 useRef는 Ref를 쉽게 사용할 수 있게 해준다고 한다. 아아 공부하기 싫다 ~ 그럼 Ref란 무엇인가? Ref 리액트에서 부모, 자식 컴포넌트 사이에서 상호작용할 수 있는 유일한choisuhyeok.tistory.com기능 1. useRef는 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 해 준다.  export default function ..

리액트의 상태관리에서 불변성을 지키라는 말 한번은 꼭 들어봤을 것이다. 왜 불변성을 지켜야하는 지에대해서 공부해 보았다. 리액트에서 불변성이란 기존의 값을 직접 수정하지 않고 새로운 값을 만들어 수정하는 것을 뜻한다. const [numberArray, setNumberArray] = useState([]); const plusArray = (e) => { setNumberArray([...numberArray, e.target.value]); } 배열을 관리하는 set함수를 사용할 때 setNumberArray처럼 기존 numberArray를 직접 수정하지 않고 새로운 배열을 만들어서 수정해준다. 아래의 예시코드로 불변성을 어떻게 지키는지 알아보자 const arrayA = [1,2,3,4,5]; co..

리듀서는 현재 상태, 액션 값을 전달받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때 불변성을 꼭 지켜야 한다. // 리듀서 함수const reducer = (state, action) => { switch (action.type) { case 'PLUS': return { value : state.value + 1}; case 'MINUS': return { value : state.value - 1}; defatul: return state; }}// 액션 값{ type : 'PLUS'}useReducer에서는 type이 없어도 되고 객체가 아니어도 된다. 사용법const Counter = ..

axios를 이용해서 api통신을 한 뒤 응답받은 데이터의 확장자명이 .xlsx 였다... 엑셀파일을 다운로드하는 기능을 구현해야했다. 거의 하루가 꼬박걸려서 구글링하고 찾아보고 시도했었지만 파일을 다운로드까지 가능했지만 엑셀 파일 데이터가 깨져서 보이지 않거나 [Object][object] 였던가.. 이런식으로 보이게 되었다 어쨋든 기능 구현은 성공했으니 메모도 할겸 끄적끄적해봐야겠다. axios 요청 후 받은 응답 헤더를 네트워크 창을 통해서 본 정보이다. 위 사진에서 보이는 것처럼 Content-Dispostion은 .xlsx이며 Content-Type은 .sheet이다. console.log로 받아온 데이터를 보면 아래처럼 이상한 글자가 나온다... PK jA‹S‘ÛÀ Y
ð[Conten..

이 글은 mia님의 블로그를 참고하여 작성한 글입니다. React Router를 이용하면 3가지 props를 전달받는다. location 현재 경로에 대한 정보와, URL에 대한 정보를 가지고 있다. match 어떤 라우트에 매칭 되었는지에 대한 정보가 있고 prarams에 대한 정보를 가지고 있다. history push, replace로 앞 뒤 페이지를 이동과 다른 페이지로 이동할 수 있다.