코딩하는 복서 🥊

1. VScode 터미널에서 router-dom 을 설치한다. 입력어: npm install react-router-dom 2. 라우터를 구현할 파일 내부에 필요한 컴포넌트 import import { BrowserRouter, Routes, Route } from 'react-router-dom'; 3. 사용 방법 1) 모든 UI는 BrowserRouter 로 감싼다. - 구조: BrowserRouter > Routes > Route *react-router-dom v6 부터 Switch 안씀. (v5까지는 Routes 역할을 Switch가 담당했었음) 2) UI 변화없이 동일하게 노출되는 영역은 밖에 위치 3) UI 변경될 내용들은 안에 로 담음 4) 그리고 각 컴포넌트를 다음과 같이 담음 impor..

1. state 란? 1) 컴포넌트가 관리하는 상태 값 2) 상태 값이 변하면 component의 UI를 변경 즉, prop 처럼 값이 변하면 component 함수를 다시 실행하여 새로운 return 값 생성 2. prop vs useState 1) prop은 component를 사용하는 외부자를 위한 데이터이고 2) state는 component를 만드는 내부자를 위한 데이터이다. 3. 사용법 1) useState는 배열을 반환하는데 0번째 index는 '값', 1번째 index는 '함수'를 반환 2) '구조분해할당'으로 useState를 선언 * const [mode, setMode] = useState('초기값'); * 여기서 mode가 '값' * setMode('값')는 함수 // 여기서 값을 ..

1. props (Property 프로퍼티) 란? 1) 컴포넌트에 값을 전달할 때 사용 2) 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. (한쪽방향으로만 흐른다) 3) 하위 컴포넌트는 상위 컴포넌트의 프로퍼티를 수정할 수 없다. (하위 컴포넌트 입장에선 읽기전용 데이터) e.g. 프로퍼티 (키 & 벨류로 구성) { 키1: 벨류1, 키2: 벨류2, 키: 185cm, 몸무게: 83kg } 2. 사용방법 1) 상위 컴포넌트 에서 하위 컴포넌트 에 title, price 값을 전달하고 싶다면 import './App.css'; import Header from './header.js'; import Nav from './Nav'; import Article from './Article'; func..

1. 태그에 직접 Style 넣기 * 보통 이렇게 inline으로 작업하진 않지만 참고 1) 주의할 점은, 스타일을 객체로 넣어야 한다는 것! 이렇게 객체로 작성 2) 값은 ""따옴표로 감싸준다. (only 숫자는 그냥 기입해도 무방) 3) html + css 에서는 font-weight 인데 리액트에서는 fontWeight (다 이런식) const Hellow = (prop) => { return Hellow {prop.name} you are {prop.age} years old } 2. css 파일 활용하기 * css 파일은 두 가지 종류가 있는데 전역에 영향을 미치는 css와 컴포넌트 전용 css가 있다 * class 선택자 사용하는 경우 className="" 으로 해야 함. 1) 전역 css ..

리액트의 가장 큰 특징은 컴포넌트(사용자 정의 태그)가 있다는 것 1. 컴포넌트(Component)란? 1) 재사용이 가능한 독립적인 모듈 2) 레고에서 하나의 블록 또는 한 파츠 (블록 덩어리) 3) 특정한 기능을 수행하기 위해 구성한 작은 기능적 단위 === 특정 기능을 수행하는 코드 덩어리를 '태그'로 만든 것. 2. 컴포넌트는 왜 필요한가? 1) 여기 1억줄 짜리 코드가 있다 치자 1억줄 코드 다른 1억줄 코드 또 다른 1억줄 코드 2) 이게 한 파일에 있으면 관리도 힘들고 찾기도 힘들고 가독성도 떨어지지 않을까? 3) 그래서 이걸 간단하게 태그 하나에 담는 것이다. 이런 식이나 이런 식으로 너무 깔끔하다^.^ 3. 컴포넌트 만들기 1) 쉽다 함수에 담으면 끝 (*단, 컴포넌트는 첫글자가 대문자여..

0. 리액트는 무엇인가? 1) 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 2) 페이스북에서 제작 3) 사용자 인터페이스 즉, 프론트엔드 개발을 위한 프레임 워크 *자세한 내용은 친절한 공식 사이트에서 확인 https://ko.legacy.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.legacy.reactjs.org 📌 들어가기 전, 설치하고 자시고 하는 모든 과정이 다 귀찮고 바로 시작하고 싶다면? 1) 스택블리츠에서 바로 시작! (스택블리츠 전화 줘 ^^) https://stackblitz.com/edit/react-78pvtb?file=sr..