React

🌱 React 기초 개념 정의 : 리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다. 🌿 특징 선언형(Declarative)이다. HTML, CSS, JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용

🌱 React SPA (Single Page Application) 정의 : 서버로부터 완전히 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트

인터넷 쇼핑몰에서 옷을 주문할 때, 원하는 옷을 장바구니에 담고 결제를 하려고 보니 다른 옷이 더 마음에 들어서 처음 담은 옷을 빼고 새로운 옷을 담으면 내가 결제해야 할 금액도 즉각적으로 변경된다. 이는 장바구니의 상태가 변한다고 말할 수 있다! 🌱 State &

재사용성 → 같은 틀을 반복할 필요가 없다.관심사 분리 → 큰 코드 덩어리를 여러 작은 함수로 쪼갠다.리액트 보일러 플레이트인 create-react-app을 사용하기 위해서는 node.js가 깔려있어야 한다.npm install 이후 node_modules 폴더 생성

🌱 상태 끌어올리기 형제 컴포넌트는 직접적으로 연결되어 있지 않아 직접 데이터 전달 불가 오직 부모 ↔ 자식 간에만 데이터 교환이 가능! 데이터를 생성하는 컴포넌트 → 부모 컴포넌트 → 데이터를 필요로 하는 컴포넌트 순으로 전달됨 자식 → 부모로 상향식 데이터 전달 | 참고자료 | > - Udemy - React 완벽 가이드

State 변경이 있을 때새로운 props가 전달 될 때부모 컴포넌트가 렌더링 될 때shouldComponentUpdate에서 true가 반환될 때forceUpdate가 실행될 때참고 자료\[react] 리렌더링 되는 조건들 살펴보기

컴포넌트에서 특정 DOM 을 선택해야 할 때, ref 를 사용해야 한다. 그리고, 함수형 컴포넌트에서 이를 설정 할 때 useRef 를 사용하여 설정한다고 배웠었다.하지만 useRef는 DOM을 선택하는 용도 외에도 다른 용도가 존재한다!바로 컴포넌트 안에서 조회 및