분류 전체보기111 [ JavaScript ] 논리연산자(&&, ||)를 활용한 단축평가 단축평가(Short-circuit Evaluation)란 논리 연산자를 사용해 조건식을 평가할 때, 첫 번째 피연산자만으로 결과를 확정지을 수 있을 때 두 번쨰 피 연산자의 평가를 생략하는 것을 말한다. 단축평가를 사용하면 보다 간결하게 코드를 작성할 수 있다. 아래의 예를 보자. ' && ' 연산자를 활용한 단축평가 ( AND 연산 ) 첫 번째 피연산자가 Falsy한 값일 경우 그 값을 반환하고 첫 번째 피연산자가 Truthy한 값이면 두 번째 피연산자를 반환한다. const value = 0; const text = value && "Hi!"; console.log(text); //출력:0 const result = false && "Hi"; console.log(result); //출력:false .. 2023. 8. 28. [ JavaScript ] Truthy와 Falsy 자바스크립트에서는 논리적인 판단을 위해 값을 참(true) 또는 거짓(false)로 판별하는데 이때 'Truthy'와 'Falsy'라는 개념이 사용된다. Truthy 와 Falsy가 뭐죠? Truthy는 Falsy 는 직접적으로 ture와 false는 아니지만 조건식이나 논리 연산에서 참과 거짓으로 간주되는 값을 의미한다. 이 값들은 조건식이나 논리 연산에서 자동으로 판별되어 참과 거짓으로 활용된다. Truthy 값의 예시 true 논리적 참 숫자 0을 제외한 모든 숫자 문자열(빈 문자열 제외한 모든 문자, ex) "0", "false"도 string) 객체 및 배열 (빈 객체 { } 빈 배열 [ ] 도 참으로 간주됨) Falsy 값의 예시 false 논리적 거짓 0, -0 숫자0과 -0 '' , "" .. 2023. 8. 28. [ React ] 클래스 컴포넌트와 함수형 컴포넌트의 이벤트 핸들러 비교 이번에는 바인딩이 필요한 클래스 컴포넌트의 이벤트 핸들러를 다루는 방식, 바인딩 없이 클래스 필드 문법을 사용해 클래스 컴포넌트를 사용하는 방식, 현재 널리 쓰이는 함수형 컴포넌트의 이벤트 핸들러를 다루는 방식에 대해서 알아보자. 클래스 컴포넌트의 이벤트 핸들러 클래스 컴포넌트는 이벤트 핸들러를 정의하고 사용할 때, 반드시 bind() 메서드를 사용해야 한다. bind()메서드를 사용해서 이벤트 핸들러와 컴포넌트 인스턴스를 바인딩 해줘야 하는 이유는 클래스 컴포넌트 내부에서 함수가 호출될 때 함수 내부의 this는 컴포넌트 자체를 가리키지 않기 때문이다. 컴포넌트 인스턴스가 아니라 엘리먼트를 가리키게 될 수 있다는 것이다. import React from 'react'; export default cla.. 2023. 8. 28. [ React ] 카운트 값을 감소하는 함수, 음수값이 나오지 않도록 만들기 온도나 좌표 같은 값이면 모를까, 음수 값은 예기치 않는 버그나 오류를 발생시킬 수 있고 계산을 복잡하게 해서 프로그래밍에서는 음수값을 피하는 경우가 많다. 카운트 값을 감소하는 함수에서 음수값이 나오지 않도록 하는 방법을 알아보자. 1. 조건문 조건문을 사용해 count가 0보다 클 때만 setCount를 호출하여 값을 감소시키기 const decreaseCount = () => { if(count > 0){ setCount(count - 1); } }; 2. 삼항 연산자 삼항 연산자를 사용하여 0보다 크면 감소시키고 아니면 0으로 만들기 const decreaseCount = () => setCount(count > 0 ? count - 1 : 0); 3. Math.max() setCount에 값을 .. 2023. 8. 27. [ React ] 리액트 함수형 컴포넌트의 훅 Hook에 대해서 ( useState, useEffect, useContext, useMemo, useCallback, useRef ) 훅Hook이라고? 훅Hook은 우리가 만화영화에서 보던 후크선장의 그 훅Hook이 맞다. 갈고리를 사용해 함수형 컴포넌트에서 상태와 생명주기 기능을 특정한 시점에서 코드를 연결하거나 걸어두는 것처럼 사용해서 쉽게 상태 관리와 라이프사이클 기능을 사용할 수 있도록 도와준다. (예를 들어, useState 같은 경우 컴포넌트의 상태를 관리를 위한 훅인데 상태를 hook하고 끌어올려 컴포넌트에 사용할 수 있게 해준다.) 훅Hook이 왜 필요할까? 클래스 컴포넌트와의 비교 - 클래스 컴포넌트는 생명주기 메서드가 분산되어 있고, 상태관리, 생명주기 관련 로직이 복잡하게 얽혀있을 수 있다. 훅은 상태와 관련된 로직을 더 작은 단위로 분리해 관리하고 컴포넌트 구조를 간결하게 해준다. - 클래스 컴포넌트에서는 상태 로.. 2023. 8. 10. [ React ] 리액트 컴포넌트의 생명주기 ( mount → update → unmount ) 리액트 컴포넌트의 생명주기란 컴포넌트가 생성되고 소멸될 때까지의 과정이다. (생성되고 -> 업데이트 -> 사라진다) 컴포넌트 생명주기의 3단계 - 마운트 Mount 나타나는 것, 컴포넌트가 생성되는 시점 constuctor() 컴포넌트가 생성될 때 처음으로 호출된다. 초기 상태를 설정하거나 메서드를 바인딩하는 등의 작업을 수행한다. render() 컴포넌트의 UI를 렌더링 한다. cpmponentDidMount() 컴포넌트가 DOM에 들어가고 호출된다. - 업데이트 Update 컴포넌트의 상태나 속성props가 변경될 때 발생하는 단계 shouldComponentUpdate(prevProps,prevState)컴포넌트가 업데이트 된 후 호출된다. (또는 forceUpdate() 강제 업데이트 함수 호출로.. 2023. 8. 8. 이전 1 2 3 4 5 6 ··· 19 다음
