리액트14 [Learning React] 6장 - 리액트 상태 관리 6.1 별점 컴포넌트 만들기 - react-icons (npm 라이브러리) 6.2 useState 훅 - 훅스에는 컴포넌트 트리와는 별도로 재사용 가능한 코드 로직이 들어있음 - useState 훅: 상태를 리액트 컴포넌트에 추가하고 싶을 때 사용 - React 패키지에 들어있음 - 배열 반환 - 배열의 첫 번째 값은 상태 변수 - 배열의 두 번째 값은 상태 값을 변경할 때 쓸 수 있는 함수 - useState 함수에 전달하는 값은 상태 변수의 default 값 - 훅이 걸린 데이터가 변경되면 데이터에 대한 훅이 걸린 컴포넌트에 새 값을 전달하면서 컴포넌트 re-rendering 일어남 6.3 재사용성을 높이기 위한 리팩터링 - style 프로퍼티; CSS 스타일을 엘리먼트에 추가 가능 - JSX에서 이.. 2022. 2. 1. [Learning React] 5장 - JSX를 사용하는 리액트 5.1 JSX로 리액트 엘리먼트 정의하기 - JSX: JS + XML - JS 코드 안에서 태그 기반의 구문을 써서 리액트 엘리먼트 정의 가능한 JS 확장 문법 - 태그를 사용해 엘리먼트의 타입 지정 - 태그의 속성은 프로퍼티 표현 - 여는 태그와 닫는 태그 사이에 엘리먼트의 자식을 넣음 - 중괄호로 감싼 코드 => JavaScript expression (JSX) - JSX 팁 - 내포된 컴포넌트; 다른 컴포넌트의 자식으로 컴포넌트 추가 가능 - className; JS에서 class가 예약어이므로 className 속성 사용 - 자바스크립트 식; 중괄호로 JS 식 감싸면 중괄호 안의 식을 평가해서 결과값을 사용해야 한다는 의미 - 평가; 중괄호 안에 들어간 JS 코드는 값을 평가받음 - 배열을 JSX.. 2022. 1. 31. [Learning React] 4장 - 리액트의 작동 원리 4.1 페이지 설정 - React 라이브러리; 뷰를 만들기 위한 라이브러리 - ReactDOM 라이브러리; UI를 실제로 브라우저에 렌더링할 때 사용하는 라이브러리 - 항상 페이지에서 리액트 관련 라이브러리를 읽어들인 다음에 JS 코드 넣어야 함 4.2 리액트 엘리먼트 - 리액트는 브라우저 DOM을 갱신해주기 위해 만들어진 라이브러리 - 코드로 DOM API 직접 조작하지 않음 - 리액트에게 어떤 UI를 생성할지 지시하면, 리액트가 명령에 맞춰 Element 렌더링을 조절해 줌 - 가상 DOM은 리액트 Element로 이뤄짐 (JS 객체) - 개발자가 가상 DOM을 변경하면 리액트는 DOM API를 통해 변경 사항을 효율적으로 렌더링해 줌 - 리액트 엘리먼트는 브라우저 DOM을 만드는 방법을 알려주는 명.. 2022. 1. 31. [Learning React] 3장 - 자바스크립트를 활용한 함수형 프로그래밍 3.0 자바스크립트를 활용한 함수형 프로그래밍 - 1930년대 Lambda Calculus (람다 계산법, 알론조 처치 발명) - 고차 함수; 다른 함수를 조작하고, 함수를 인자로 받거나 반환하는 것이 가능한 복잡한 함수 - 1950년대 Lisp (존 맥카시) - 함수가 1급 시민/1급 멤버라는 개념 구현 - 변수에 함수 대입 가능, 함수를 다른 함수에 인자로 넘길 수 있음, 함수에서 함수를 만들어서 반환 가능 3.1 함수형이란 무엇인가? - JS에서 함수가 1급 시민이므로 JS는 함수형 프로그래밍 지원 - 1급 시민: 함수를 값처럼 활용 가능 - 함수를 일반적인 데이터로 취급 가능 - 함수를 일반적인 값과 마찬가지로 저장하거나 읽어오거나, 애플리케이션에서 흘려보낼 수 있음 - JS에서는 함수가 애플리케.. 2022. 1. 30. 이전 1 2 3 4 다음 반응형