COCSOS - guitar, computer, etc

이제는 class형 컴포넌트는 안쓰고 hook을 주로 쓰고 있다! *리액트 훅(hook) ? 컴포넌트에 기능을 추가할때 사용하는 '함수'. ex) 컴포넌트에 상태값 추가, 자식 요소에 접근. 리액트에서 제공하는 몇가지 훅이 있는데 1. useState - 상태값 추가 2. useEffect - 부수효과 처리 (외부의 상태를 변경하는 것) ex 서버 api 호출 / event handler 등록 해지 등 등등 *useState() 배열을 반환하는데, [상태값, 상태값 변경 함수 const [count, setCount] = useState(초기값); 상태값 변경함수는 비동기면서 배치로 동작한다. import React, {useState, useEffect } from 'react'; export defa..

#리액트 요소와 가상 돔 리액트 요소? 리액트가 UI를 표현하는 방법. const element = click 이 jsx문법은 babel을 통해 const element = React.createElement( 'a', {href: 'http://xxx.com'}, 'click' ); 이렇게 변환하게 된다. #리액트에서 가상 돔을 만들고 실제 돔에 반영/변경하는 과정을 보자 리액트 요소를 만들면 객체 형식으로 리액트 요소가 이뤄져있다. console.log(element) //출력 결과 const consoleLogReult = { type:'a', key:'key1', ref:null, props:{ href:'~~~.com' style:{width:100,} children:'click' }, //...

#컴포넌트 함수의 반환값 import React from 'react'; export default function App(){ return 하이; return ; return '문자'; return [1,2,3]; return [??,3]; //X 배열로 반환시 리액트 요소는 키값을 가져야함 return [??,33]; //O 배열로 반환시 리액트 요소는 키값을 가져야함 return 안녕하냐 //키가 없어도 순서를 지정 return 안녕하냐 //프래그먼트로 동작 자동 키가 없어도 순서를 지정 return 안녕하냐 //원치않은div 깊이 들어남 return 하이 {count.value >0 && //조건부 렌더링. 양수일때만 그린다 // 조건부 렌더링 -> 나중에 다시 볼것 return ( {ReactD..

UI 데이터를 속성값이나 상태값으로 관리해야함 #상태값 let color = 'red'; export default function App(){ function change(){ color = 'blue'; } return ( 좋아 ) } // 변경되지 않는다, color가 변경됨을 리액트가 모르기 때문. 따라서 값을 변경을 알게 하기위해선 //0. import React, {useState} from 'react'; //1. const [color, setColor] = useState('red') /로 초기화 //2. setColor 함수로 변경 function change(){ setCoor('blue'); } #속성값 export default function title(props){ } expo..

#리액트에서 UI코드와 비즈니스 로직이 분리되어있다. jsx에서 한번만 작성하면 그 이후로는 신경쓸 필요가 없다. 이전 : 어떻게 그리는지를 : 명령형 프로그램, 상당히 구체적 jsx:선언형 프로그램 UI 무엇을 그리는지만 나타냄 react? dom뿐만 아니라 모바일에도 적용할 수 있다. 추상화 단계가 높음

#react router dom? 한 페이지에 모두 담으면 무겁다. Route? path정보에 따라서 렌더링할 컴포넌트를 결정해줌 페이지 별 분할 Link ? 클릭시 to 로 이동시킴 import React from 'react'; import {BrowserRouter, Route, Link} from 'react-router-dom'; import Rooms from './Rooms' export default function App(){ return( 홈 사진 방 소개 ) } function Home(){ return 홈이다 }

일주일만에 다시 리액트를 공부한다. 대학교를 다니며 알바를 하며 장학금을 받는 대학생들이 갑자기 존경스러워진다. #SPA란? 우선 npx create-react-app 으로 프로젝트 기본 환경 세팅 Single Page Application 이다. 기존의 사이트가 Multi Page application이라면, SPA는 한 페이지로 이루어져있다. 한페이지란, 한번 페이지를 로딩한 뒤로는 뒤로가기를 눌러도 새로 HTML 페이지를 로딩하지 않는다는 말. 그러면 브라우져 뒤로가기, 앞으로가기를 누르면 어떻게 하라구? # useEffect useEffect( ()=>{ window.onpopstate = function (event){ setPageName(event.state); }; }, {}); 를 통해 ..

#npm start 개발용이며 최적화 X #https로 로긴하고 싶을 땐 set HTTPS=true && npm start 원래 인증서가 필요함 #npm run build 배포 시 사용하는 명령어 -> build폴더 내 정적 파일이 생성되어 서버사이드 렌더링이 불가한것. #npm serve -s build(위치) build 위치로 서버를 제공한다 #build 폴더 내 css 파일 - 기존 src에있는 css이 하나로 병합된 것 - animation 속성 ? 컴파일 -> 2줄(벤더 접두사 포함이라 하위 브라우져 지원) 동적 import 사용한 경우 별도 js파일로 만들어짐 큰 이미지 파일은 media 파일에 생성 / 작은 이미지는 js내부에 내장됨 (빠르긴 함 http2.0부터는 빨라서 http 호출 감소..

# 입문이라도 많은 지식 노력이 필요하다 - webpack 설치, babel 설치, jest, eslint, polyfill, HMR,CSS 후처리 등등의 환경... create-react-app 을 통해 배워보자 # npx create-react-app 혹은 npx create-react-app 프로젝트이름 을 통해 예제 파일 다운로드 # cra? 기본 패키징이 설정된 프로젝트임 # 초기 프로젝트에 cra 프로젝트를 사용할수도 있고, Next.js 라는 프로젝트를 사용할 수 있다. 그런데... CRA는 server side rendering을 지원하지 않는다. 그러니 ssr이 필요하니 next.js를 사용한다. backoffice같은데 사용 build system, eslint같은 설정 변경이 거의 어..

#웹팩의 기본 개념 다양한 기능 - 파일 내용을 기반으로 파일 이름에 해시 적용 (브라우저 캐싱 이용) - 미사용 코드 제거 - js 압축 - js 에서 css,json, txt 를 일반 모듈처럼 부르기 - 환경변수 주입 - ***모듈 시스템 사용가능(ESM,commonJS) 각각 ES6 , 노드에서 많이 사용 #모듈 시스템? // 어떤 파일1 file1js export default funciton funcx(){} export funciton func2(){} export const varri1 =123; export let vari2 = 'hel'; //다른 파일2 file2.js import myFunc1, {func2, varri1, vari2} from './file1.js'; //다른 파일 ..