React

메타(구 페이스북)이 개발한 프론트에드를 위한 오픈 소스 자바스크립트 라이브러리대규모 웹 서비스 UI를 더 편리하게 개발하기 위해 만들어진 기술React.js로 만들어진 서비스들 : 넷플릭스, 페이스북, 인스타그램, 노션 등등컴포넌트 기반으로 UI를 표현한다.컴포넌트(

터미널에 npm create vite@latest 입력 ➡️ 생성할 프로젝트명 입력 ➡️ 사용할 프레임 워크 선택 (React) ➡️ 사용할 버전 선택 (JaveScript)Public : svg, png, jpg 같은 이미지 파일이나 폰트, 정적 파일들을 저장하는 폴

먼저 ! src 폴더 안에 components 폴더를 생성한다.components 안에는 기본적인 Header, Main, Footer를 만들 건데 확장자는 jsx이다.그러고 각 component 안에 코드를 작성하고 return한 값을 내보내주고그걸 App.jsx에

React에서는 부모 컴포넌트가 자식 컴퍼넌트들에게 마치 함수의 인수를 전달하듯이 원하는 값을 전달해주는게 가능→ 이때 컴퍼넌트에 전달된 값을 Props라고 한다.(properties의 줄임말)컴포넌트를 함수 호출하듯이 전달하는 값에 따라 각각 다른 UI를 렌더링할 수

React : Event Handling

📍 Favicon이란? : 웹사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 16x16 픽셀의 작은 이미지 : 특정 웹 사이트를 식별 가능하게 해주는 대표 아이콘 >✅ 예시 📍 Favicon 적용 방법 : 보통 React 애플리케이션에서는 HTM

📍 State란? : State(상태)라는 건 현재 가지고 있는 형태나 모양을 정의하는 값, 변화할 수 있는 동적인 값 >#### 예시 >가스레인지에 불이 켜져있을 경우 ➡️ 켜진 상태의 가스레인지 >가스레인지에 불이 꺼져있을 경우 ➡️ 꺼진 상태의 가스레인지 ✅

📍 State와 Props 란? State란? Props란? 📍 리렌더링이 발생하는 이유 **1️⃣ 자신이 관리하는 state의 값이 변경될 때 2️⃣ 제공받는 props의 값이 변경될 때 3️⃣ 부모 컴포넌트가 리렌더링되면 자식 컴포넌트가 리렌더링** 📍

이미 만들어진 디자인버튼, 입력창, 메뉴, 카드 같은 디자인 컴포넌트들이 만들어져있다.사용하고 싶은 디자인 컴포넌트을 선언하고 코드에 컴포넌트명 (Button)을 선언하면 된다.이미 만들어진 디자인을 내 스타일대로 변경하거나, 색깔과 모양을 쉽게 변경할 수 있다.반응형

📍 Register 컴포넌트 생성 Register.jsx App.jsx 📍 Register 컴포넌트에서 간단한 회원가입 폼 만들기 ℹ️ 회원가입을 위해 필요한 정보 사용자의 이름 생년월일 국적 자기소개 1. 사용자 이름 📍 onChangeName 컴포넌트 생

이렇게 작성한 State를 한번에 관리하기 위해서 지우고useState 안에 지웠던 State를 객체 형태로 만들어서 관리하도록 한다.그리고 onChange로 설정했던 것들을 다 변경해야하는데setName, setBirth, setCountry, setBio 라는 함수

새로운 Reference 객체를 생성하는 기능이다.const refObject = useRef()refObject : 생성한 레퍼런스 객체는 컴퍼넌트 내부의 변수로써 일반적인 값들을 저장할 수 있다.❗️ useState와 동일한가?: 아니요! 컴포넌트 내부의 변수로 활

클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있는 React의 특수한 기능들을 함수 컴포넌트에서도 사용할 수 있도록 도와주는 메서드들(함수 컴포넌트에서도 클래스 컴포넌트의 기능을 마치 낚아채듯이(hook) 가져와서 사용할 수 있게 해준다)useState ➡️