자바스크립트 (6) 썸네일형 리스트형 [20240510] 앱개발 시작하기 #23 | 라이프사이클 (LifeCycle) | useEffect 라이프사이클 = 생애주기1. Mount Like 탄생- 컴포넌트가 탄생하는 순간- 화면에 처음 렌더링 되는 순간서버에서 데이터를 불러오는 작업2. Update Like 변화- 컴포넌트가 다시 렌더링 되는 순간- 리렌더링 될 때를 의미어떤 값이 변경되었는지 콘솔에 출력 3. UnMount Like 죽음- 컴포넌트가 화면에서 사라지는 순간- 렌더링에서 제외 되는 순간컴포넌트가 사용하던 메모리 정리useEffect: 리액트 컴포넌트의 사이드 이펙트를 제어하는 새로운 React HookReact 컴포넌트 사이트 이펙트= 컴포넌트의 동작에 따라 파생되는 여러 효과import './App.css'import { useState, useEffect } from 'react'import Viewer fro.. [20240504] 앱개발 시작하기 #7 Trythy & Falsy: JavaScript에서는 참, 거짓이 아닌 값도 참, 거짓으로 평가한: 이를 이용하면 조건문을 간결하게 만들 수 있음// 1. Falsy한 값let f1 = undefined;let f2 = null;let f3 = 0;let f4 = -0;let f5 = NaN;let f6 = "";let f7 = 0n;if(!f1){ console.log("falsy");}// 2. Truthy 한 값 -> 7가지 Falsy 한 값들 제외한 나머지 모든 값let a1 = "hello";let a2 = 123;let a3 = [];let a4 = {};let a5 = () => {};if (a4){console.log("Truthy")};// 3. 활용 사례function printN.. [20240502] 앱개발 시작하기 #6 콜백 함수(Callback Function)자신이 아닌 다른 함수에 인수로서 전달된 함수를 의미함 //1. 콜백함수function main(value){ // console.log(value); value();}// sub는 콜백함수로 활동 중function sub(){ console.log("i am sub");}main(sub);main(() => { console.log("sub");})//2. 활용function repeat(count,callback){ for(let idx=1; idxcount; idx++){ callback(idx); }}repeat(5,function(idx){ console.log(idx);}); 스코프우리말로 범위를 뜻함.. [20240502] 앱개발 시작하기 #5 함수중복으로 작성되는 코드를 함수로 만듦으로써 재사용 가능 // 함수function greeting(){ console.log("안녕하세요");}greeting();function getArea(width, height){ function another(){ console.log("another"); } // let width = 10; // let height = 20; another(); let area = width * height; console.log(area); return area; //반환값 , 결과값}getArea(10,20);let area2 = getArea(10,20);getArea(area2); 함수 표현식과 화살표 함.. [20240502] 앱개발 시작하기 #4 조건문: 특정 조건을 만족했을 때에만 실행되는 코드 작성위한 문법//1. 조건문 (if문)let nums = 10;if(nums >=10){ console.log("10이상이다");}else if(num>=5){ console.log("5이상이다")}else{ console.log("5 보다 작음");}// 2. switch문 -> if문과 기능은 동일 / but 직관적let animal = "cat";switch(animal){ case "cat":{ console.log("고양이"); } default : { console.log("해당x"); }}반복문: 어떠한 동작을 반복해서 수행할 수 있도록 만들어 주는 문법 // 반복문for(let.. [20240502] 앱개발 시작하기 #3 연산자프로그래밍에서의 다양한 연산을 위한 기호, 키워드 ex) + - * / //1. 대입연산자let var1 = 1;//2. 산술연산자 + - * / %let num7 = (1+2)*10;//3. 복합 대입 연산자 - 산술 + 대입let num8 = 10;num8 = num8+ 20;num8 += 20;//4. 증감 연산자let num9 = 10;num9++; // 후위 연산 : 후에 적용++num9; // 전위 연산 : 적용 전 적용//5. 논리 연산자let or = true || false;let and = true && false;let not = !true;//6. 비교 연산자let comp1 = 1===2; // =을 3번 쓰는 이유는 2번을 쓸 경우 자료형 까지 비교가 안된다!// 예를 들면.. 이전 1 다음
