01\. 컴포넌트 Components 란?UI를 재사용이 가능한 개별 조각으로 나누어, 개별적으로 관리하는 것을 뜻한다. JavaScript의 함수처럼 작동하며, props를 입력받아 React 엘리먼트를 반환 한다. 즉, 컴포넌트는 데이터( props )를 입력받아
01\. props란?속성 property의 준말로, 부모 컴포넌트로부터 자식 컴포넌트로 전달할 수 있는 사용자 정의 속성을 뜻한다. 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 사용하며 단방향 데이터 흐름을 갖는다. 그렇기 때문에, 하위 컴포넌트에서 props를
01\. state란?컴포넌트는 상호 작용의 결과를 화면에 반영해야 하는 경우가 빈번히 발생한다. 예를 들면 폼에서 입력 필드에 사용자가 값을 입력하거나, 버튼을 클릭하여 이미지가 변화하는 등 이벤트가 발생하는 경우 등이다.컴포넌트는 로직을 처리하기 위해 특정한 값 (
01\. Styled-Components란?React 컴포넌트에 CSS를 적용하는 방법은 많다. 그 중에서 CSS 스타일링을 가장 효과적으로 하기 위해 만들어 진 것이 바로 Styled-Components이다. Styled-Components는 props나 속성을 사용
\*React state 관련 작성글 ▶️이전 정리글 참고01\. React Hook이란?React는 16.8 버전부터 Hook이란 개념이 새로 추가되었다. Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수로, React
1. useEffect✨ 01. useEffect란? useEffect는 React 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 설정하는 Hook이다. 즉, 컴포넌트가 생성되거나 제거될 때, 특정 로직을 실행하고 싶다면 useEffect를 사용하면 된다. 외부
useRef는 저장공간 또는 특정 DOM 요소에 접근하기 위해 사용하는 Hook이다. (Ref 는 reference 참조를 뜻한다.) JavaScript에서 특정 DOM을 조작하기 위해 querySelector나 getElementBy 등을 사용한다. React에서는
Context API는 불필요한 prop-drilling을 하지 않아도 타겟 컴포넌트에게 필요한 데이터/상태를 쉽게 공유(전역 상태 관리 )할 수 있게 해준다. 즉, 모든 컴포넌트 또는 특정 컴포넌트에서 사용할 수 있는 데이터/상태를 전달할 때 사용한다.useConte
1. useMemo🔖 01. useMemo란? 2. memoization🗃️ 01. memoization이란?