순수나라

1.3 클래스더보기더보기16.8 버전이 나오기 전까지는 리액트에서는 모든 컴포넌트가 클래스로 작성1.3.1 클래스란 무엇인가?자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 탬플릿과 같은 개념특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것자바스크립트에서 클래스로 하는 모든 것들을 함수로도 동일하게 표현할 수 있음class Car { constructor(name) { this.name = name } honk() { console.log('${this.name}이 경적을 울립니다!') } static hello() { console.log('저는 자동차입니다') } set age(value) { this.car..

1.2 함수1.2.1 함수란 무엇인가?자바스크립트에서 함수란 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것function sum(a, b) { return a + b}sum(10, 24)리액트에서 컴포넌트를 만드는 함수도 기초적인 형태를 따름함수를 선언하고 매개변수로는 일반적으로 props라고 부르는 단일 객체를 받으며 return 문으로 JSX를 반환Component(props) 형태로 호출하지만, 리액트에서의 함수 컴포넌트는 와 같이 JSX 문법으로 단일 props별로 받거나, 같은 형태로 모든 props를 전개 연산자로 받는다는 차이가 있음1.2.2 함수를 정의하는 4가지 방법함수 선언문함수 선언문은 표현식이 아닌 일반 문(stat..

React에서 state와 props는 둘 다 컴포넌트에서 데이터를 다루는 데 사용되지만, 목적과 사용 방법에서 차이가 있다.📖 State컴포넌트 내부에서 관리되는 값으로서 변경 가능이 값은 컴포넌트가 렌더링되는 동안 변할 수 있으며, 변경될 때마다 컴포넌트가 다시 렌더링즉, React에서 state는 컴포넌트 내에서 관리되는 상태 데이터이며, 컴포넌트 내부에서 변경할 수 있고 컴포넌트의 렌더링 결과 결정 장점컴포넌트의 내부 상태를 유지동적인 UI를 구성예) 상태 데이터를 사용하여 사용자 입력에 대한 반응을 보여주거나, 외부 API에서 데이터를 가져와서 화면을 업데이트React의 렌더링 성능을 최적화React는 컴포넌트의 상태가 변경될 때만 렌더링을 다시 수행상태 데이터를 사용하여 불필요한 렌더링을 방..

1.1 자바스크립트의 동등 비교더보기더보기의존성 배열에 대한 고민 : 보통 리액트에서 제공하는 eslint-react-config에 선언돼 있는 react-hooks/exhaustive-deps의 도움을 받아 해당 배열을 채우는데, 실제로 이것이 어떤 식으로 작동하는지, 또한 왜 이러한 변수들을 넣어야 하는지 이해하지 못하는 경우가 많음렌더링 관점 : 리액트 컴포넌트의 렌더링이 일어나는 이유 중 하나가 바로 props의 동등 비교에 따른 결과 리액트의 가상 DOM과 실제 DOM의 비교, 리액트 컴포넌트가 렌더링할지를 판단하는 방법, 변수나 함수의 메모이제이션 등 모든 작업은 자바스크립트의 동등 비교를 기반으로 함1.1.1 자바스크립트의 데이터 타입원시타입(primitive type)boolean참과 거짓..