TypeScript 개요: Microsoft에 의해 개발된 프로그래밍 언어로서 JavaScript의 단점을 보완하고 확대한 언어-TypeScript는 컴파일하면 JavaScript를 생성 공식사이트https://www.typescriptlang.org/ JavaScript With Syntax For Types.TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.www.typescriptlang.org 왜 써야하나. JavaScript의..

Styled Components: JS파일 내 CSS를 사용할 수 있게 해주는 CSS-in-JS 라이브러리 설치npm i styled-components @types/styled-components 기본 사용const 컴포넌트명 = styled.태그명`~css~`;import styled from "styled-components";const Button = styled.button` background-color: thistle; border: none; color: white;`;- Class Name 자동랜덤으로 주어짐 프로퍼티 사용 동적스타일링const Container = styled.div` display: flex;`;const Content = styled.div` backgrou..

Navigation경로이동1. useNavigate이벤트 핸들러(버튼 클릭 등)나 특정 조건에 따라 프로그래밍적으로 경로 이동을 할 때 사용하는 훅(함수)const navigate = useNavigate();navigate("경로");import {useNavigate} from "react-router-dom";function Login() { const navigate = useNavigate(); const loginHeandle = () =>{ //로그인 성공 후 이동 navigate("/mypage") } return Login} navigate( -1 ) 뒤로 가기  navigate( 1 )앞으로 가기 navigate( '/path', { replace: true } ) 히..

React Router: React 애플리케이션에서 라우팅 기능을 제공하는 라이브러리로 URL과 React 컴포넌트를 매핑해 페이지 간 전환 처리-특징 : 동적 라우팅, 중첩 라우팅, URL변경 새로고침없이 콘텐츠 업데이트 *라우팅?요청 URL에 맞는 페이지를 보여주는 것설치 (createBrowserRouter도 쓸거라 최신버전으로 받음)npm install react-router-dom@latest BrowserRouter: 기본 라우팅 설정을 위한 컴포넌트-Router.tsximport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';import Home from './Home';function Router() { retu..

useContext: 전역 상태 관리(테마,언어설정,사용자정보) 훅으로, 컴포넌트 간 데이터 쉽게 전달하도록 도와줌  props drilling 문제 줄이는데 유용  *props drilling?데이터를 자식-손자-증손자에 걸쳐 계속 내려야 할 때-> 단점 : 만약 앱 내부 많은 컴포넌트들이 공통적으로 필요한 전역데이터(사용지,테마,언어설정)를 props로 일일이 단계별로 전달하면 복잡해지고 힘듦. 그리고 원하는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 해당 값을 사용하지않는 경우에도 props 을 받고 전달해야함  => Context Context앱 내부에서 전역적으로 필요한 데이터들을 컴포넌트들끼리 쉽게 공유할 수 있는 방법제공데이터를 가지고 있는 상위 컴포넌트가 Context를 통해 데이터를 알림..

Lifecylcle마운트 : 첫 렌더링할 때업데이트 : 리렌더링될 때언마운트 : 더이상 렌더링하지 않을 때 useEffect: 어떤 값이 변경될 때마다 특정 코드를 실행하는 훅, 특정 값 검사useEffect(callback, [deps?]) //콜백함수, 의존성 배열첫번째 인자 : 수행하고자 하는 작업두번째 인자 : 검사하고자하는 특정 값 or 빈 배열 마운트 제어 (컴포넌트가 처음 렌더링될 때): 두번째 인자 빈 배열[]일 때 마운트 (처음 렌더링) 시에만 콜백함수 실행 useEffect(() => { console.log("컴포넌트가 처음 렌더링될 때 실행");}, []); props가 변경되어도 다시 실행X-주요 사용1회 실행 로직(초기화 코드, 로그 출력, 타이머 설정)초기 데이터 로드useE..

State1. state: 컴포넌트 내에서 데이터가 저장되는 곳2.setState: state를 변경시켜주는 함수 *state가 변경될시 해당 컴포넌트 재렌더링됨 ( useState ,useEffect 유지)3. useState: state, setState를 return 하면서 초기값을 설정해주는 hook const [state, setState] = useStete(초기값);//state만 쓰고싶다면const state = useStete(초기값)[0]; setState함수를 통해 state 변경가능. 변경후 리렌더링사용1. setState함수로 state 값 변경import { useState } from 'react';function App() { const [counter,setCounter..

Props : 컴포넌트(자식)에 데이터를 전달하는 방식 -부모 컴포넌트function App() { return ( //Props { content:"Save Changes", food:"banana" } 전달 ) } -자식 컴포넌트function Btn(props) {//전달받은 properties console.log(props); //Object {content: 'Save Changes', food: 'banana'} console.log(props.content); //Save Changes console.log(props.food); //banana}값사용 때 마다 점표기법 쓰기 여간 불편 1. 구조 ..

Component: React에서 UI를 구성하는 기본 단위 (재사용가능)🎈컴포넌트의 이름은 항상 대문자로 시작하기1. 함수형 컴포넌트function MyComponent() { return Hello!;}* 화살표 함수 컴포넌트const MyComponent = () => Hello!;- 한줄로 작성시 {return} 생략가능- {}중갈호 같이 적는다면 return 필수const MyComponent = () =>{ return ( Hello! );}; 2. 클래스형 컴포넌트: React의 이전 버전 방식기존 프로젝트나 레거시 코드에서는 여전히 클래스형 컴포넌트를 사용하고 있을 수 있기때문에 알아두면 좋음.class MyComponent exte..

Create React App: React 팀에서 제공하는 공식 툴로, React 프로젝트를 생성하는 가장 기본적인 방법 설치1. Node.js 설치   1-1.버전확인node -vnpm -v   1-2. 안깔려있다면 설치https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. CRA 설치 및 프로젝트 생성터미널에서 다음 명령어 실행npx create-react-app [프로젝트명] or npm create react-app [프로젝트명]code [경로]* npx: 최신 CRA 템플릿을 바로 다운로드 및 실..