본문 바로가기

IT

 (34)
Static Static Class 의 정적 메소드 를 정의한다. class를 new 키워드를 통해 생성하지 않아도 이름을 통해 접근 가능한 정적 메소드 를 정의한다. class Person { // static method static getName() { return "I am person" } } Static method 호출 위에서 설명 했듯이 new 키워드를 통해 생성하지 않아도 class의 이름을 통해 접근 가능하다. class Person { // static method static getName() { return "I am person" } } // I am person console.log(Person.getName()) 이처럼 정적 메서드는 특정 클래스 인스턴스가 아닌 클래스 전체에 필요한 기능..
Key JavaScript 에서의 List Array.prototype.map() map() 메소드는 배열 내의 모든 요소 각각에 대해 callback 함수를 호출한 결과를 모아 새로운 배열 을 반환한다. const arr = [1, 2, 3, 4] const arr2 = arr.map((a) => a * 2) console.log(arr2) // Array [2, 4, 6, 8] 위의 코드는 콘솔에 값 2, 4, 6, 8 을 담고 있는 새로운 Array 를 출력한다. React 에서 배열을 Element 리스트로 만드는 방식은 위의 방식과 유사하다. React에서의 map() 활용 아래와 같이 사용하여 listItems를 element 안에 포함할 수 있다. ... const arr = [1, 2, 3, 4]..
Optional chaining Optional chaining Optional chaining 연산자(?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않는다. 연결된 객체 체인 내에 존재하는 속성 값을 읽을 수 있다. const user = {} console.log(user.addr.city) // TypeError: Cannot read property "addr" of undefined 위와 같은 상황에서 user 오브젝트 내에 addr 이라는 속성이 없는데 읽는 것을 시도하고 있으므로 에러가 발생한다. 이러한 오류를 방지하기 위해 Optional chaining 을 사용하기 이전에는 && 연산자를 사용했다. const user = {} console.log(user && user.addr && user.addr.cit..
Custom Hook Custom Hook 자신만의 Hook을 만들어 컴포넌트 로직을 함수로 추출하여 재사용 가능성을 증가시킬 수 있다. 이처럼 React에서는 로직의 재사용성을 높이기 위해 Custom Hook을 만들어 사용한다. 단 아래와 같은 몇 가지 규칙이 존재한다. 사용자 정의 Hook의 이름은 use 로 시작한다 1. 특정 함수가 그 안에서 Hook을 호출하는지 알 수 없기 때문에 이름 규칙이 존재한다. 2. 이러한 규칙을 지키지 않으면 Hook 규칙을 준수하고 있는지 확인할 수 없다. 같은 Hook을 사용하는 두 개의 Component는 state를 공유하지 않는다. import { useState, useCallback } from "react" const useInputs = (initialValue) => ..
useEffect Hooks Hook은 Component에서 데이터(state) 를 관리하고 데이터가 변경될 때 Effect(상호작용) 를 다룰 수 있다. useState useEffect useCallback 이러한 것들이 모두 React의 hooks 이다. 기존의 Class 기반 Component는 State와 life-cycle을 관리하기 복잡했지만 Hooks는 이러한 것들을 간편하게 관리할 수 있게 도와준다. 단, Hooks는 React 함수 내부 에서만 사용이 가능하며 Hooks의 이름은 use로 시작한다. React Hook은 이러한 특징들이 있는데, 그 중에서 나를 골치아프게 했던 useEffect에 대한 기록을 남기려고 한다. Effect Hook Effect Hook을 사용하면 함수 컴포넌트에서 Side ..
State State React를 활용하여 프로젝트를 진행하다 보면 State의 개념이나 사용 방법이 익숙하지 않아 이로 인해 스트레스를 많이 받았던 경험이 있으리라 예상한다. 이처럼 반복되는 스트레스를 줄이고자 State에 관한 글을 적어 보려고 한다. State란 요약하자면 컴포넌트 내에서 관리하는 변수 이다. 이러한 state를 사용하기 위해선 아래처럼 useState를 활용하여 선언 및 초기화 해야 한다. ( React hook 기준 ) const [number, setNumber] = useState(0) React 에서는 number의 값을 변경하고 싶은 경우 setNumber를 활용하여 변경해야 한다. const onClickButtonEventHandler = () => { // add number ..
Shallow copy && Deep copy Shallow copy 얕은 복사는 참조(주소)값을 복사한다. const obj = {} obj.a = 10 const newObj = obj newObj.a = 20 console.log(obj.a) // 20 console.log(obj === newObj) // true obj 객체를 새로운 newObj 객체에 할당했다. 하지만 참조 값을 할당했으므로 newObj의 값을 변경하더라도 obj의 값이 변경된다. 또한 === 연산으로 두 객체를 비교한 결과 값이 true 로 나온 것을 확인할 수 있다. 위의 결과로 확인할 수 있는 것은 obj 의 메모리 주소를 newObj가 동일하게 가리키므로 결국 하나의 객체를 공유하고 있는 것이다. Deep copy 깊은 복사는 값 자체를 복사하는 것을 의미한다. c..
Functional programming Pure vs Impure Functions Pure function은 input에 따라 output이 변경되지 않는 값을 내놓는다. 또한 함수 밖의 변수에 영향을 받지 않는다. const add = (a, b) => a + b 위에서 add 함수는 Pure function이다. 함수에서 받는 parameter a와 b에 따라서 항상 a + b 값을 결과로 반환하기 때문이다. const NUMBER = 42 const getNumber = (a) => NUMBER * a 위의 getNumber 함수는 Pure function이 아니다. 바깥의 NUMBER라는 변수의 영향을 받고 있기 때문에 항상 같은 결과값을 반환한다고 보장할 수 없다. 이러한 상황에서 우리가 debug를 할 때 다양한 어려움에 겪을 확..

티스토리툴바