리액트 훅 중의 useRef 훅은 DOM에 접근할 수 있도록 해주거나, 값을 저장해서 사용할 수 있는 훅이다. (이때 저장한 값은 컴포넌트의 렌더링과 무관하게 유지된다!) 아직까지 useRef를 input 태그를 포커싱할 때 사용했던 경우가 대부분이었는데, 다른 예시가 더 있는지 추가적으로 정리해보려고 한다. 포커싱 하기 버튼을 클릭하거나, 이벤트 핸들러의 input 요소 등에 포커싱을 할 수 있다. {isLoggedIn && ( {showSearchInput && ( )} setShowSearchInput(true)} /> ... )} 프로젝트에서는 외부영역을 클릭했을 때를 판단에서 검색창이 닫히도록 사용한 적도 있다. // 검색창 외부 클릭 여부 판단 const clickOutside = (e: an..

redux-thunk? 리덕스에 관해서 공부하다 보면 '미들웨어'라는 것을 한 번쯤 들어보았을 것이다. redux-thunk, redux-saga, 그 외에도 redux-promise-middleware 등 여러 가지가 있는데 오늘은 그중에서도 가장 많이 사용되고 있는 라이브러리 중 하나인 redux-thunk에 대하여 정리해보려 한다. 리덕스 미들웨어? 먼저 미들웨어에 대해서 알아볼까 한다. 리덕스를 사용해보았다면 위와 같은 구조로 리덕스가 새로운 state를 반환한다는 것을 알고 있을 것이다. dispatch를 통해 리듀서로 전달된 액션이 리듀서로 전달되어 state가 변경된다는 것! 리덕스 미들웨어는 여기서 액션이 디스패치되고 리듀서에 전달되기 전에 추가적인 작업을 진행할 수 있다. 보통 서버와 통..

React에서의 CSS 리액트에서 CSS를 적용하는 방법은 여러 가지가 있다. CSS 파일을 import 하거나 module로 사용할 수도 있고, SASS 같은 전처리기나 tailwind 등의 프레임워크를 이용할 수도 있다. 그중에서 오늘은 Styled-components에 대해서 정리해보려 한다. Styled-components에 대해서 몰랐던 부분이 많았고, 무엇보다 사용해보니 생각보다 더 편한 라이브러리라는 것을 알게 되었기 때문이다! Styled-components Styled-components는 자바스크립트 안에 CSS를 작성하는 CSS-in-JS 방식이다. 자바스크립트를 이용해서 CSS 코드를 만들어내서 컴포넌트를 꾸밀 수 있다. 이런 CSS-in-JS 방식의 패키지가 Styled-compo..

리액트의 state와 props에 대해서 가볍게 정리해보려 한다..! 현재 내용은 추후 덧붙여지거나 수정될 수 있다. 😇 ((잘못된 부분에 대한 첨언은 언제나 환영입니다..)) State 컴포넌트 내부에서 바뀔 수 있는 값. useState 훅을 통해 리액트에 state의 변화를 알려서 컴포넌트가 재평가될 수 있도록 한다. 이후 JSX가 다시 평가되며 변화된 부분을 화면에 렌더링한다. const [state, setState] = useState(''); state에 바로 변경하면 안 될까? useState가 const로 작성된 이유는?? 🤔 우선 state는 setState 함수를 통해서만 변경이 가능하다. state를 바로 쓰면 안 되나? 싶을 수 있는데, 이렇게 state가 직접 수정될 위험을 방지..

PropTypes 리액트에서는 props를 통해서 다른 컴포넌트에 데이터를 전달할 수 있고, 이를 통해 재사용 가능한 컴포넌트를 만들 수 있다. 우연찮게 props에 타입 검사를 할 수 있다는 것을 알게 되어 정리해보려 한다. props에 타입 검사를? 요새 핫한 타입스크립트는를 쓰는 이유 중 하나는 타입을 엄격하게 체크해서 에러를 줄이기 위함도 있다. props에 타입 검사가 필요한 이유도 이와 결이 같다고 본다. 컴포넌트가 잘못된 타입의 props를 전달받거나, 필요한 props가 누락된다면 의도치 않은 에러로 이어질 것!.. PropTypes는 이런 에러를 방지해줄 수 있다. 참고로 리액트 공식문서에 따르면 PropTypes는 React v15.5부터 prop-types라는 패키지로 분리되었다!....

리액트를 공부하다 보면 어느 순간 리덕스에 대해서 알아보아야 하는 시기가 온다. 나에게도 드디어 그 시기가 왔다!... 🧐 리덕스에 대해 깊고 좋은 글들은 이미 충분히 많으니... 아직은 초심자인 나의 관점에서 개념을 가볍게 살펴보기로~ (고로 이 글은 초심자들에게 적합) Redux and Context API 리덕스는 가장 많이 사용하고 있는 상태 관리 라이브러리다. 컴포넌트의 상태 업데이트 로직을 효율적으로 관리할 수 있고, 상태를 공유하는 방법도 훨씬 편하게 전달할 수 있다. 아마 리덕스를 처음 접하는 사람들이라면 지금까지 Context API를 써왔을 것이다. (나 또한...) React.createContext 메서드를 통해서 컨텍스트를 만들어서 제공되는 Provider를 통해서 값을 공유하는..

리액트를 좀 공부하다 보니 컴포넌트의 생명주기에 대해서도 알아봐야 할 것 같아서 정리해본다. 우선 이 생명주기라는게, 컴포넌트가 화면에 나타나서 업데이트되고 사라질 때까지의 주기를 말한다. 이 주기에 사용되는 메서드들 세 가지는 다음과 같다. 이 메서드들을 useEffect 훅과 비교해서 살펴보려 한다. componentDidMount() componentDidUpdate() componentWillUnmount() mount ?? 먼저 마운트(mount)라는 용어가 무엇인지를 알아야겠다. 마운트와 언마운트가 있는데, 마운트는 사전적인 의미로는 '시작하다'라는 뜻이지만- 리액트 컴포넌트에서의 마운트는 DOM 트리가 생성되고 웹브라우저에 나타날 때를 말한다. 그러니 이렇게 말할 수 있겠다. 마운트(moun..