728x90 반응형 TIL147 useState 와 useReducer useState 1. 이 버튼을 누르면 값이 이전 값과 같기 때문에 렌더링하지 않음 ... setCount(1)}>1 ... 객체는 참조형이기 때문에 주소값이 달라져 렌더링함 ... setCount({count:1})}>1 ... - 객체는 참조형이라서 값만 바뀌면 메모리 주소 안 바뀜 밑 예시는 렌더링 안 됨 ... 1 ... 2. 함수형 업데이트 쓰셈 ... {setCount(count+1)}> {count} ... 위 코드는 빠르게 두 번 누르면 한번만 카운팅됨 이건 상태 업데이트를 비동기적으로 하는 리액트 때문임 (근데 이 설명보다는 한번에 많은 요청이 오면 성능 최적화를 위해 일괄적으로 처리하려는 리액트 때문에 그런 거 같음) 그래서 보통 함수형 업데이트 씀 c => c + 1가 호출되면서 이전.. 2024. 4. 8. Iterator 패턴 Iterator 패턴 컬렉션 내의 요소를 순차적으로 접근할 수 있는 인터페이스를 제공하는 패턴 function createIterator(collection) { let index = 0; return { next: () => { return index < collection.length ? { value: collection[index++], done: false } : { done: true }; } }; } const numbers = [1, 2, 3, 4, 5]; // 배열에 대한 Iterator 생성 const iterator = createIterator(numbers); // Iterator를 사용하여 순차적으로 배열의 요소에 접근합니다. console.log(iterator.next());.. 2024. 3. 19. 자바스크립트 접근 제한자 public, private, protected public : 외부에서 접근 가능 (자바스크립트는 이게 디폴트임) private : # 120) { console.log("Warning: Speed limit exceeded!"); } } // public 메서드에서 protected 메서드 호출 drive() { this.#checkSpeed(); console.log("Driving..."); } } // Car를 상속받는 하위 클래스 class SportsCar extends Car { // 상위 클래스의 private 필드에 접근하여 조작하는 메서드 speedUp() { this.#speed += 20; // 부모 클래스의 private 필드에 직접 접근할 수 없으므로 오류 발생 console... 2024. 3. 9. 리액트 - 순수 함수 순수 함수란 부작용 (side Effect)가 없어야 됨 순수 함수 예시 // 두 숫자를 더하는 순수 함수 function add(a, b) { return a + b; } // 함수 호출 console.log(add(3, 5)); // 출력: 8 // 간단한 함수형 컴포넌트 function Greeting(props) { return Hello, {props.name}!; } // 함수형 컴포넌트 호출 ReactDOM.render( , document.getElementById('root') ); 한마디로 결과가 명확해야 됨 순수하지 않은 컴포넌트 1. useEffect 안에서 axios 바로 호출 하는 거 => 상태관리 쓰면 해결 2. 브라우저 이벤트 그냥 걸어버리는 거 => 상태관리 쓰면 해결 참고.. 2024. 3. 5. Facade Pattern 여러 SubSystem들의 기능을 하나의 Facade Object로 정의하고, Client가 Facade Object를 사용하는 형태 각각의 클래스와 메서드들이 목적과 동적이 이해하기 어려워 가져다 쓰기 어려울 때 클래스를 재정리하는 것 facade - 여러 SubSystem들의 기능을 하나의 Facade Object로 정의하고, Client가 Facade Object를 사용하는 형태 SubSystem(하위 시스템) - 수십 가지 라이브러리 혹은 클래스들 Actor(Client) - 서브클래스에 직접 접근하는 대신 facade를 사용함 장점 1. 하위 시스켐의 복잡성이 줄어들어 외부에서 가져다 쓰기 쉬움 2. 복잡한 코드를 감춤으로서 시스템 코드를 모르더라도 facade 클래스만 이해하면 가져다 쓰기 쉬.. 2024. 3. 5. 추상화 팩토리 패턴 추상화 팩토리 패턴 팩토리 패턴의 단점을 보완하고자 나온 거 같음 팩토리 패턴 // 각 차종의 클래스 class Sedan { configure() { this.seats = 4; this.engine = 'V6'; } displayInfo() { console.log(`Sedan with ${this.seats} seats and ${this.engine} engine.`); } } class SUV { configure() { this.seats = 7; this.engine = 'V8'; } displayInfo() { console.log(`SUV with ${this.seats} seats and ${this.engine} engine.`); } } // 팩토리 클래스 class CarFacto.. 2024. 2. 6. 호이스팅 관련 const, let, var 에러 정리 호이스팅 밑에 선언, 할당되어 있는 변수들을 앞에서 호출했을 때 선언된 변수만 가져오고 할당된 값은 못 가져오는 거임 호이스팅이 발생하면 선언된 변수는 undefined로 초기화되어 있기 때문에 undefined가 반환됩니다. var : 초기화 + 할당 같이함 그래서 초기화는 일단 되었으니 undefined 뜸 레퍼런스 에러 x let 및 const : 선언 / 초기화 분리되어서 일어남. 호이스팅에 의해 선언 부분만 끌어올려지고, 초기화는 선언이 이루어진 위치에서 발생함. 그래서 undefined도 못가져오고 레퍼런스 에러 남 1. 초기값 안 줬을 때 const const a; console.log(a) const 는 무조건 초기값과 함께 있어야 함 그래서 초기값 없다고 에러 뜨는 거임 SyntaxErr.. 2024. 2. 5. 팩토리 패턴 팩토리 패턴 const car1 = { name: "차1", price: "1000만원", getInfo: () => this.name+"의 가격은 "+this.price+" 입니다." } const car2 = { name: "차2", price: "2000만원", getInfo: () => this.name+"의 가격은 "+this.price+" 입니다." } 이렇게 생기는 객체들 반복 짱 많음 이걸 만드는 걸 함수화해서 공장을 만드는 거임 const factory = (param) => { return { name: param.name, price: param.price, getInfo: ()=> this.name+"의 가격은 "+this.price+" 입니다." } } const result1 =.. 2024. 2. 5. 얕은 복사 깊은 복사 다시보기 원시 타입 number, string 등등 참조 타입 arr, obj 원시 타입 값 할당하기 let a = 1; let b = 2; a = b; b = 3; console.log(a) //2 a, b 는 주소값을 가지고 있음 a = b 할 때 b가 가지고 있는 주소로 가서 값을 가져온 다음 샥 복사해서 이건 새로운 메모리 공간에 넣고 이 메모리 공간 주소를 a 에 할당하는 거임 그러니까 a와 b는 가지고 있는 메모리 주소가 다름 참조 타입 값 할당하기 let arr1 = [1,2] let arr2 = [3,4] arr1 = arr2 arr2.push(5) console.log('arr1',arr1) // [3,4,5] 배열은 참조 타입이기 때문에 arr1 자체가 arr2의 메모리 주소를 참조하게 만듦 그.. 2024. 1. 28. 이전 1 2 3 4 5 6 7 ··· 17 다음 728x90 반응형
