react.js
React에서 중요하게 알아야 할 몇가지 개념 정리
기술면접 준비를 위해 React 관련해서 중요한 내용을 정리하게 되었다. 간단하게 정리했으니 더 자세한 사항은 React 공식문서와 velopert 님의 강의문서를 참고하길 바란다. React 공식문서에서는 React를 이렇게 설명하고 있다. 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 1. React 특징 선언형(Declarative) 인터렉티브한 UI를 만들 때 생기는 어려움을 줄여줌 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 함 컴포넌트 기반 스스로 상태를 관리하는 캡슐화된 컴포넌트 컴포넌트 로직은 JavaScript로 작성되기 때문에 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있음 2. React 기본적..
useRef 사용법 정리
HTML과 JavaScript를 사용할 때, 특정 DOM을 선택해야 하는 상황에서 어떤 메서드를 사용하는가? 바로 DOM 함수인 getElementById(), querySelector() 를 사용한다. React를 사용하는 프로젝트에서도 가끔 DOM을 직접 선택해야 하는 상황이 발생할 수 있다. 예를 들어, 특정 Element의 크기나 위치를 가져와야 할 때, 스크롤바 위치를 가져오거나 설정해줘야 할 때, focus를 설정해줘야 할 때 등, 다양한 상황이 있다. 또한 video.js, jw player와 같은 HTML5 비디오 관련 라이브러리를 사용할 때나 D3, chart.js 같은 그래프 관련 라이브러리를 사용하게 될 때도 특정 DOM에 라이브러리를 적용하기 때문에 DOM을 선택해야 하는 상황이 발..
useState, useReducer 차이점과 useReducer 사용방법
React Hook 중에서 컴포넌트의 상태를 업데이트 할 때 사용하는 Hook으로는 useState와 useReducer가 있다. useReducer를 중심해서 두가지 Hook의 차이점에 대해 간단히 정리해보고자 한다. 1. useState 설정하고 싶은 다음 상태를 직접 지정해주는 방식으로 상태를 업데이트 해준다. useState를 통해 변수를 만들고 화면을 렌더링 시키면, set함수를 통해 바뀐 데이터만 React DOM에 리렌더링이 되도록 해준다. 이러한 방식으로 불변성을 유지하며 변수의 상태를 업데이트 시키기 위한 Hook이다. 2. useReducer action 객체를 기반으로 상태를 업데이트 해준다(action 객체: 업데이트 할 때 참조하는 객체) 보통 type(변수명, 변경가능) 이라는 ..
React 기록 시작
앞으로 이곳에 내가 React에 관해 공부한 것들을 조금씩이라도 남겨보려고 한다... (정리를 안하니까 머릿속에 잘 안남는 것 같기도..ㅎㅎ) 특히 공부하다가 이해가 안된 부분을 더 집중적으로 작성하고자 한다. 언젠가.. 프론트엔드 주니어 개발자가 되는 그날까지! 파이팅!!