본문 바로가기

기록

(53)
[새싹x코딩온] 웹 퍼블리싱 과정 13주차 - 1 | React - useRef, useEffect Ref와 useRef() Reac의 DOM 접근 1. HTML에서와 마찬가지로 id/className 등으로 접근 → 하지만 하나의 컴포넌트를 여러 번 사용한다면 id가 중복될 수 있다. 2. ref 이용 → 컴포넌트 내부에서만 동작해서 중복되지 않는다. → Class형 컴포넌트의 기본 기능 / 함수형 컴포넌트에서는 useRef import 해서 사용한다. ref 컴포넌트가 리렌더링 되어도 값을 유지하고 싶을 때 사용한다. (vs. variable) ref의 값은 변경되어도 리렌더링되지 않는다. (vs. state) DOM을 직접적으로 접근할 때 사용한다. ex) 컴포넌트의 input 태그의 값을 받거나, focus 주기, 스크롤 조작 useRef() useRef() 훅은 특정 컴포넌트에 접근할 수 있는..
[새싹x코딩온] 웹 퍼블리싱 과정 12주차 - 3 | React - 이벤트 핸들링 이벤트 핸들링 React의 Event 주의점 React의 이벤트는 소문자가 아닌 카멜 케이스를 사용한다. JSX를 사용해 이벤트 핸들러를 전달한다. 기본 DOM 요소에만 이벤트 설정이 가능하다. React 합성 이벤트 (Synthetic Event) 합성 이벤트란 브라우저 이벤트들을 포함하고 있는 리액트 고유 이벤트 객체이다. 객체를 모든 브라우저에서 이벤트를 동일하게 처리한다. ※ 리액트가 DOM이아닌 VirtulDOM을 사용하는 것처럼 웹 브라우저의 nativeEvent가 아닌 nativeEvent를 감싼 SyntheticEvent를 사용한다. 버튼을 클릭하면 text가 'Goodbye World'로 바뀌는 이벤트 import { useState } from "react"; function Pract..
[새싹x코딩온] 웹 퍼블리싱 과정 12주차 - 2 | React - props props props란 부모가 되는 컴포넌트에서 자식 컴포넌트에게 보내는 데이터이다. 여러 번 쓰이는 컴포넌트에서 내부 데이터만 다르게 사용하고 싶을 때 사용한다. 형제끼리는 직접 전달할 수 없고 부모를 통해서만 전달할 수 있다. props 사용 방법 하위 컴포넌트에서 props 함수의 인자에 전달받을 props 이름을 작성한다. 상위 컴포넌트에서 text라는 값을 전달받아서 h1 내부에 넣어준다. 상위 컴포넌트에서 props 하위 컴포넌트 생성 시 만들어준 props의 이름을 태그의 속성처럼 사용한다. Hello, ~라는 문자열이 하위 컴포넌트로 전달된다. 컴포넌트를 중복 사용해서 사용할 때, 데이터만 다르게 넘겨줄 수 있다. 상위 컴포넌트에서 받은 데이터를 다시 하위 컴포넌트로 전달할 수 있다. pr..
[새싹x코딩온] 웹 퍼블리싱 과정 12주차 - 1 | React - state state state란 컴포넌트가 가지고 있는 특정 변수이다. state, 즉 변수의 상태가 변경되면 해당 컴포넌트는 재런더링된다. → 유동성 관리가 쉽다. 함수형 컴포넌트 useState useState를 import 시키고 사용한다. state의 값은 useState만을 이용해서 변경할 수 있다. 버튼을 클릭하면 apple, 사과가 번갈아서 출력되는 코드 FunctionState.jsx import {useState} from 'react' export default function FunctionState(){ const [showEnglish, setShowEnglish] = useState(true); return( {showEnglish ? 'apple' : '사과'} setShowEnglis..
[새싹x코딩온] 웹 퍼블리싱 과정 11주차 - 3 | JS for React - 전개구문, 구조 분해 할당, 클래스, 모듈 / React - Component, JSX JS for React 전개구문 (spread) 전개구문이란? 반복 가능한 객체(배열, 유사 배열, 문자열 등)에 사용하는 문법이다. 객체의 요소에 접근해서 요소들을 하나씩 분리해서 전개요소에 접근해서 반환한다. 연산자 ...을 사용한다. 배열에 접근 const arr1 = [1, 2, 3, 4, 5]; const arr2 = ['a', 'b', 'c']; # 전개구문을 사용해서 쉽게 두 배열을 합칠 수 있다. const arr3 = [...arr1, ...arr2]; console.log(arr3) # [1, 2, 3, 4, 5, 'a', 'b', 'c'] 문자열에 접근 const str = 'hello'; const strArr = [...str]; console.log(strArr) # ['h', ..
[새싹x코딩온] 웹 퍼블리싱 과정 11주차 - 2 | React - 시작하기, npm React Virtual Dom 부드럽고 빠르다. 변경되는 부분만 최소한으로 변경하기 때문에 메모리 누수가 적다. 컴포넌트로 이루어져 있어서 재사용이 높다. React 문법을 이용해서 버튼 만들기 React CDN 링크 https://ko.legacy.reactjs.org/docs/cdn-links.html CDN 링크 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org CDN 링크를 복사해서 HTML 파일 head에 붙여넣어 사용한다. function HelloWorldButton(){ const [isClick, setIsClick] = React.useState(false); const text = isCli..
[새싹x코딩온] 웹 퍼블리싱 과정 8주차 - 2 | 정적배포, Branch 정적 배포 정적 배포란 사용자와 상호작용을 하지 않는 사이트를 말한다. 로그인 등 서버의 데이터를 받아오는 동작이 불가능하고 html을 있는 그대로 보여줄 수 있다. Netlify 배포 방법 1. netlify 홈페이지에서 github로 회원가입한다. https://app.netlify.com/ Netlify App app.netlify.com 2. 깃허브에서 repository를 만들고 로컬에서 만든 폴더를 git bash로 git 저장소를 생성하고 연결한다. git init # git 저장소를 생성한다. git remote add origin [github repo 주소] # github와 연결한다. 3. 폴더에 index.html을 포함한 파일들을 만든다. 이때 index.html은 최상위에 있어야..
[새싹x코딩온] 웹 퍼블리싱 과정 8주차 - 1 | 피그마 프로토타입 실습 피그마 프로토타입 실습