JS' 공부흔적

이전 글에서 함수 컴포넌트는 인스턴스를 갖지 않기 때문에 ref가 존재하지 않는다고 잠깐 언급하였다. 이를 보고 인스턴스가 무엇인지, 그리고 컴포넌트와의 차이는 무엇인지가 궁금해져서 더 알아보았다. 또한 엘리먼트와도 함께 비교해보았다. Element 엘리먼트는 UI를 나타내기 위한 가장 작은 단위이다. 보통 일반 자바스크립트 객체(plain JavaScript object)로 표현되는데, 이는 type과 props 필드로 구성되며 아래와 같이 나타낸다. { type: "button", props: { className: "btn-style" } } 위 엘리먼트는 React의 JSX 문법을 통해 아래와 같이 표현된다. const element = Click; Component 컴포넌트는 특정 기능을 수행하..

최근 합류한 사이드 프로젝트의 코드를 테스트하던 중 아래와 같은 Warning을 발견했다. Warning: Function components cannot be given refs. Did you mean to use React.forwardRef()? 함수 컴포넌트에는 ref가 존재하지 않는데, forwardRef()를 쓰려고 했던 것이 아니냐는 Warning이었다. 해당 부분 코드를 확인해보니 자식 컴포넌트에 쓰이는 ref를 부모 컴포넌트에서 관리하고 있었다. 대략적인 코드를 보자. // CalendarContainer.jsx (부모 컴포넌트) const CalendarContainer = ({ type }) => { const calendarRef = useRef(null); ... return (..

useEffect에 deps 배열에 특정 값을 넣으면, 다음의 2가지 경우에 useEffect 내의 콜백 함수가 실행된다. 컴포넌트가 마운트 될 때 deps 배열 내의 값이 변경될 때 그러나 1의 경우에는 콜백 함수를 실행하지 않고, 2의 경우에만 콜백 함수를 실행해야 할 때도 있을 것이다. 그럴 때는 아래와 같이 isMounted라는 state를 선언하여 활용하면 된다. const [isMounted, setIsMounted] = useState(false); useEffect(() => { if (isMounted) { ~~ } else { setIsMounted(true); ~~ } }, [something]); 최초에는 isMounted가 false이므로 useEffect 내의 콜백함수 중 els..

React를 사용해 개발하면서 라우팅 기능을 구현할 때 대부분 react-router-dom을 사용할 것이다. react-router-dom에는 수많은 라우터 중에 HashRouter와 BrowserRouter가 존재한다. 둘 중에서 대부분 BrowserRouter를 사용하여 라우팅을 구현할 것이다. BrowserRouter와 HashRouter를 비교하는 글들이 많은데, 각각의 특징을 간단히 적자면 아래와 같다. Hash Router 주소에 Hash(#)가 붙는다. Hash(#) 때문에 검색 엔진이 읽지 못한다. (SEO 최적화 X) 별도의 서버 설정을 안 해도 새로고침 시에 에러가 발생하지 않는다. Browser Router History API를 사용한다. 별도의 서버 설정을 하지 않으면 URL에 ..

API KEY는 개인 정보이다. 따라서 깃허브에 프로젝트 코드를 올릴 때는 이를 숨기고 올려야 한다. 이때 .env 파일을 생성하여 API KEY를 환경 변수로 설정해놓고 필요한 곳에서 불러다 쓰면 된다. 먼저 .env 파일을 만들자. 여기서 주의할 점은 .env 파일은 최상단 경로에 위치해야 한다! 그리고 아래와 같이 환경 변수를 선언한다. // .env REACT_APP_API_KEY = api key 입력 이때 환경 변수명은 꼭 REACT_APP_으로 시작해야한다. 또한 따옴표로 문자열을 감싸지 않아야 한다. 이와 관련된 내가 겪은 에러는 여기를 참고하면 된다. 이제 필요한 곳에서 환경 변수를 불러다 쓰면 되는데 아래와 같이 사용한다. const API_KEY = process.env.REACT_A..

useReducer는 reducer를 사용하여 다양한 상태를 다른 값으로 업데이트할 때 사용하는 Hook이다. 여기서 reducer란, 현재 상태 state와 업데이트를 위해 필요한 정보가 담겨있는 Action 값을 파라미터로 받아서 state를 변경하는 함수이다. Redux에서도 사용하는 개념이니 아래 글을 참고해도 좋을 것 같다. [Redux] Vanilla Redux의 기본 개념 Redux는 Javascript의 상태 관리 라이브러리이다. 보통 React와 함께 많이 사용되지만, Augular, jQuery, vanilla JavaScript 등 여러 framework에서 사용이 가능하다. Redux에 기본적인 개념 및 용어를 알아보자. npm i 2junsu.tistory.com 참고로 Redux..

라이징 테스트에서 원티드를 클론코딩하던 도중 이력서 작성 페이지에서 이슈가 발생했다. 실제 원티드에서는 textarea에 내용을 입력하면 라인수에 따라 textarea 영역이 늘어난다. 즉 아래 요소들이 아래로 밀린다. 그러나 나의 경우, textarea의 height는 고정돼있고 스크롤에 의해 글 내용이 보여졌다. 이를 해결하기 위해 useRef 훅과 onKeyUp, onKeyDown을 사용했다. const ref = useRef(); ... { autoResizeTextarea(ref); }} onKeyUp={() => { autoResizeTextarea(ref); }} className="detail" name="detail" placeholder="세부사항" onChange={handleInpu..

Airbnb 클론 코딩을 진행하면서 로그인 드롭다운 메뉴를 구현하다가 해당 메뉴 밖의 어느 부분을 클릭하더라도 드롭다운 메뉴가 닫히도록 구현해보기로 다짐했다. useRef와 EventListener를 사용하여 구현했다. 기본적인 원리는 다음과 같다. 에서 "특정 영역"에 ref를 부여한다. 현재 페이지에서 클릭할 때마다 이벤트가 감지되도록 구현하고, 그때마다 close 함수를 호출한다. close 함수에서는 ref 영역(특정 영역)이 이벤트가 감지된 영역을 포함하는 지를 확인한다. 포함하지 않는다면 ref 영역(특정 영역) 외부를 클릭한 것이므로 이때 메뉴가 닫히도록 구현한다. 1. 에서 "특정 영역"에 ref를 부여한다. 나의 경우, 위에 두 영역을 "특정 영역"으로 설정해서 useRef를 2개 설정했..

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 크게 3가지로 분류할 수 있는데, 마운트, 업데이트, 언마운트가 그 3가지이다. 마운트는 컴포넌트가 생성되고 DOM이 업데이트되어 웹 브라우저 상에 나타나는 것이다. 업데이트는 말 그대로 컴포넌트를 업데이트하는 것이다. 언마운트는 마운트의 반대 개념으로, 컴포넌트를 DOM에서 제거하는 것이다. 총 9가지가 있는데 참고로 이는 클래스형 컴포넌트에서만 사용이 가능하다. 함수 컴포넌트에서는 Hooks를 사용한다. 오늘은 클래스형 컴포넌트에서 쓰이는 라이프사이클 메서드 9가지를 알아보자. 1. render() 최종적으로 작업한 UI를 렌더링하는, 즉 리액트 요소를 반환하는 메서드이다. 따라서 라이프사이클 메서드 중 유일하게 필수 메서드이다. rend..