기록저장소

라이프사이클이란 useEffect 사용하기React 컴포넌트의 사이드 이펙트 : 컴포넌트의 동작에 따라 파생되는 여러 효과useEffect(()=>{}, []) useEffect로 라이프 사이클 제어하기//1. 마운트 : 탄생 -> 최초1회 실행useEffect(()=>{}, []);//2. 업데이트 : 변화, 리렌더링useEffect(()=>{});//2-1. 최초 실행 무시 업데이트const isMount = useRef(false);useEffect(()=>{ if(!isMount.current){ isMount.current = true; false; } console.log("update");});//3. 언마운트 : 죽음useEffect(()=>{ //useEffect의 ca..

//App.jsx import { useState } from 'react'; import Viewer from './components/Viewer'; import Controller from './components/Controller'; import './App.css' function App() { //viewer와 controller가 형제관계이므로 부모인 app에서 useState const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); } return ( Simple counter ) } export default App//Viewer.jsx const Viewer = ({..

실습 준비하기확장프로그램 설치- ESLint : 실행전 VS Code에서 미리 오류를 보여줌- eslint 옵션 설정rules: { ... "no-unused-vars": "off", //사용하지않는 변수를 오류로 알려줌 off "react/prop-types": "off", //리액트를 더욱 안전하게 사용하도록 하는 옵션 off},  React 컴포넌트- 두가지 컴포넌트 생성 방법(+ class는 잘 사용하지 않음)function Header(){ return( HI );};const Header2 = () => { return( HI2 );}; - 화면에 렌더링하기부모컴포넌트(root컴포넌트) App, 자식컴포넌트 Header, Header2function Ap..

React.js 소개1. 컴포넌트 기반 UI 표현 2. 화면 업데이트 구현이 쉬움 (선언형 프로그래밍, 컴포넌트)3. 화면 업데이트 처리가 빠름 : Virtual DOM (가상 DOM) 이용  React App 생성Vite : 기본 설정이 적용된 React App 생성 가능//vite 설치npm create vite@latest//package정보 기반 라이브러리 설치npm i//react 실행npm run dev//http://localhost:5173 에서 실행 가능 React App 구동원리 https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard  [2024] 한입 크기로 잘라 먹는 리액트(Rea..

Node.js웹브라우저가 아닌 곳에서도  JS를 실행시킬 수 있는 실행환경(구동기)2009년 출시, 웹서버/ 모바일웹/ 데스크톱앱 등을 만들 수 있게됨 Node.js 설치하기https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org npm (node package manager) 까지 잘 설치됐는지 확인node -vnpm -v Node.js 사용하기패키지 : Node.js에서 사용하는 프로그램 단위npm initpackage.json 생성됨 //node에서 실행시키고자하는 파일을 터미널에 입력node index.js..

Truthy & Falsy1. Falsy한 값 : undefined, null, 0, -0, NaN, "", 0n2.Truthy 한 값 : 7가지 Falsy 한 값들 제외한 나머지 모든 값function printName(person) { //if(person === undefined || person === null) //복잡한 조건문대신 falsy활용 if (!person) { console.log("person의 값이 없음"); return; } console.log(person.name);}let person = { name: "이정환" };printName(person); 단락 평가function printName(person) { const name = person && ..

한입리액트 완강후 수강예정https://smore.im/form/gIl1v0ftOn 사전등록 이벤트 | 한입 크기로 잘라먹는 Next.js사전등록자 전원 50% 할인 쿠폰 제공, 30명 추첨 100% 할인 쿠폰 제공 중smore.im

VSCode  확장자 추천1. prettier : 코드 정렬2. 파일 확장자별 아이콘 설정3. 오류 안내4. 수정사항 즉시 반영  변수와 상수1. 변수let age;age = 30;2. 상수const birth = "1997.01.07";3. 변수 명명규칙(네이밍 규칙)3-1. $, _ 제외한 기호는 사용할 수 없다.let $_name;3-2. 숫자로 시작할 수 없다.let name1;let $2name;3-3. 예약어를 사용할 수 없다.let if = a; (x)let const = 1; (x)4. 변수 명명 가이드let salesCount = 1;let refundCount = 1;let totalSalesCount = salesCount - refundCount; 자료형1. 숫자형  2. 문자형  ..

Context란? 컴포넌트의 props를 통한 데이터 전달하여 모든 단계를 거쳐야하는 기존 방식의 단점을 보완하여 컴포넌트를 직접 전달, 여러 컴포넌트에서 자주 필요로 하는 데이터에 사용 Context를 사용하는 경우 여러개의 Components들이 접근해야하는 데이터 (ex. 로그인정보, 로그인여부, UI테마, 현재 언어 등) function App(props){ return ; } function Toolbar(props){ //이 Toolbar 컴포넌트는 ThemedButton에 theme를 넘겨주기 위해서 'theme' props를 가져감 //현재 테마를 알아야하는 모든 버튼에 대해서 props로 전달하는것은 비효율 return( {/* 호출1 */} ); } function ThemedButto..

Composition 방법과 Inheritance Composition : 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것, 합성 Composition 조합방법 - Containment : 하위 컴포넌트를 포함하는 형태의 합성 방법, Sidebar나 Dialog같은 Box형태의 컴포넌트는 자신의 하위 컴포넌터를 미리 알 수 없음, children이라는 props를 사용해서 조합 function FancyBorder(props){ return( {props.children} ); } React.createElement( type, [props], [..children] ); function WelcomDialog(props){ return( //FancyBorder 컴포넌트 내의 모든 jsx태그는 ..