-

3장 리액트 훅 깊게 살펴보기

3.1 리액트의 모든 훅 파헤치기3.1.1 useState함수형 컴포넌트는 매번 함수를 실행해 렌더링이 일어나기 때문에 함수 내부의 let으로 정의된 변수도 함수가 실행될 때마다 다시 초기화됩니다.useState는 클로저로 구현되어 외부에 해당 값을 노출시키지 않으면서 함수가 실행되더라도 이전의 값을 정확하게 꺼내 쓸 수 있습니다. 게으른 초기화useState 인수로 원시값을 넣지 않고 함수를 넣어줍니다. 초기값이 복잡하거나 무거운 연산을 포함하고 있을 때 사용하며, 리렌더링시에는 함수를 실행하지 않습니다. 이는 localStorage, sessionStorage 접근, 배열 순회 등이 필요할 때 사용하는 것이 좋습니다. import React, { useState } from 'react';const ..

8장 좋은 리액트 코드 작성을 위한 환경 구축하기

8.1 ESLint를 활용한 정적 코드 분석8.1.1 ESLint 살펴보기ESLint는 어떻게 코드를 분석할까?자바스크립트 코드를 문자열로 읽는다.자바스크립트 코드를 분석할 수 있는 파서로 코드를 구조화한다.2번에서 구조화한 트리 AST를 기준으로 각종 규칙과 대조한다.규칙과 대조했을 때 이를 위반한 코드를 알리거나 수정한다.ESLint는 파서 espree를 사용하여 자바스크립트 코드를 분석한다. AST 트리 예시를 확인하고 싶다면 아래 사이트를 참조해보자.https://astexplorer.net/ no-debugger 규칙Eslint에는 debugger; 선언을 금지한 규칙이 존재한다. 해당 규칙은 다음과 같이 작성되어있다.module.exports = { meta: { type: 'probl..

2.1 JSX란? JSX는 리액트가 등장하면서 페이스북에서 소개한 새로운 구문이지만, 반드시 리액트에서만 사용하라는 법은 없다. JSX는 XML과 같은 내장형 구문이며, 리액트에 종속적이지 않은 독자적인 문법이다. JSX는 반드시 트랜스파일러를 거쳐야 비로소 자바스크립트 런타임이 이해할 수 있는 의미있는 자바스크립트 코드로 변환된다. JSX의 설계목적 다양한 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화해 ECMAScript로 변환한다. 2.1.1 JSX의 정의 JSX를 구성하는 가장 기본 요소 JSXOpeningElement: JSXClosingElement: JSXSelfClosingElement: JSXFragment: JSXChildren(optional) JSX 식별자로 가능한 것 $,..

==와 ===의 차이 JavaScript에서 ==와 ===는 두 값의 동등성을 비교하는 데 사용되는 연산자입니다. 하지만 이 둘은 다른 방식으로 동작합니다. == (동등 연산자): ==는 값의 동등성을 비교합니다. 하지만 엄격한(strict) 동등성이 아니라 변환된 동등성을 비교합니다. 이것은 필요에 따라 다른 데이터 타입을 변환하여 비교를 수행합니다. 예를 들어, 0 == false는 true를 반환합니다. 이는 JavaScript가 숫자 0을 불리언 false로 변환하여 비교하기 때문입니다. === (일치 연산자): ===는 값의 엄격한(strict) 동등성을 비교합니다. 이것은 값뿐만 아니라 데이터 타입까지 고려하여 비교를 수행합니다. 예를 들어, 0 === false는 false를 반환합니다. 이..