코딩하는 복서 🥊

1. useEffect() 란? 나 뭐 달라진거 없어? 대상이 변화할 때마다 함수를 다시 실행 함. 컴포넌트가 랜더링 될 때마다 특정 작업을 실행하는 리액트 훅이다. e.g. 내가 지정한 변수나 오브젝트 등이 업데이트 되면 그것을 인지하고 함수 다시 실행. * 컴포넌트가 마운트될 때 무조건 한번은 실행 됨. 📌 관련 용어 정리 1) Mount : 컴포넌트가 최초로 나타낼 때를 뜻한다. 2) Render : 컴포넌트가 마운트 된 후 컴포넌트가 호출 될 때를 뜻한다. 3) UnMount : 컴포넌트가 사라질 때를 뜻한다. 2. useEffect() 사용법 1) 기본 구조 useEffect(콜백함수, dependency) === useEffect(()=>{}, []) * 콜백 함수: 수행하고자 하는 작업 2)..

1. useParams ? 리액트 라우터에서 제공하는 훅으로 URL의 동적 경로 매개변수를 가져오는 역할을 함. 즉, 페이지 이동에 따라 고유한 다른 주소 값을 갖게 할 수 있음. e.g. http://URL/라면/진라면매운맛 *라면은 path *진라면 매운맛은 parameter 2. useParams 사용하기 1) react-router-dom을 설치 npm install react-router-dom 2) 라우팅 구현할 페이지 생성 및 세부 페이지 생성 세부 페이지의 path에 :파라미터 값을 넣어준다. e.g. path="/라면/:라면번호" * 파라미터 값은 편의에 따라 다른 이름으로 써도 됨 (가능하면 맥락에 맞는 용어로) 📌 App 컴포넌트에 라우팅 구조를 구현하고 Day 컴포넌트를 세부페이지로..

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. filter() 메서드란? 주어진 배열에서 조건에 맞는 모든 요소를 모아 새로운 배열로 반환합니다. 2. 사용법 const result = arr.filter(A => B); === arr(배열)에서 B 조건에 부합하는 요소 (A) 를 result 변수에 배열로 담는다.

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..

좌,우로 넘어가는 배너가 아닌 CSS의 z-index를 활용하여 앞,뒤로 넘어가는 배너를 만들어보자 1. z-index란?CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.=== Z축 순서를 정하는 속성이라고 한다. 1) 그럼 Z축은 무엇인가?보통 X축이 가로, Y 축이 세로일때 앞뒤축이 Z축이다. 2) demo를 통해 z-index의 역할을 알아보자.- auto는 부모요소의 순서를 그대로 따른다. - 숫자가 들어갈 경우, 숫자가 높은게 더 앞에서 보이는 것을 알 수 있다.=== z-index의 숫자를 높이면 앞으로 튀어나온다. 그럼 이걸로 뭘 할 수 있다? 옆으로 넘어가는게 ..