Redux 정리 redux에 대해 공부한 후 발표할 자료를 정리합니다. Redux란? 가장 많이 사용되는 자바스크립트 상태관리 라이브러리이다. Redux를 사용하면 규모가 크고 복잡한 어플리케이션에서 상태를 필요한 컴포넌트에만 전달하여 의미없는 props drill
표지컴퓨터 구조를 이해하고 있는 개발자는 문제 상황을 빠르게 진단할 수 있고, 해결 방안을 찾을 수 있다.개발한 프로그램이 어떤 환경에서 어떻게 작동하는지 이해하고, 이를 위한 컴퓨터 환경을 스스로 판단할 수 있어야 한다. 이는 성능, 용량, 비용의 문제로 직결되며 컴
엄격하게 함수를 선언하면 string 끼리만 더하는 함수와 number 끼리만 더하는 함수를 따로 만들 수 있다. 반면 자바스크립트는이렇게만 작성해도 add함수만으로 string, number를 모두 더하도록 할 수 있다. 이런 식으로 짜면 자바스크립트의 함수와 같은
call 메소드를 활용해 hello함수에 cat 객체를 넣어주면 콘솔에는 정상적으로 메세지가 출력된다. 이는 함수 내부의 this 키워드에 암시적으로 any 타입이 지정되었기 때문이다. 하지만 정적언어를 사용하는 이상 any 타입은 지양해야 한다.함수의 매개변수처럼 t
변수마다 같은 튜플 타입을 지정하고 있다. 반복된 코드 작성이며, 더 많은 타입이나 배열의 길이가 길어진다면 비효율 적일 것이다. 타입 별칭을 통해 사용자 정의 타입을 만들면 한번에 타입을 지정할 수 있다.type 별칭 = 타입 을 통해 미리 타입 정보를 선언할 수 있
인터페이스를 통해 객체의 스펙(속성과 속성의 타입), 함수의 파라미터, 함수의 스펙(파라미터, 반환 타입 등), 배열과 객체를 접근하는 방식, 클래스에 대한 약속을 정할 수 있다.? 를 통해 객체의 속성을 선택사항으로 만들 수 있다.readonly를 통해 읽기 전용 속
TypeError: Cannot read properties of null (reading 'textContent')타입 단언을 통해 h1 엘리먼트를 찾게 하면 html문서에는 h1요소가 없기 때문에 에러메세지가 출력된다.if 문을 통해 h1 엘리먼트가 존재할 경우에만
el 변수에 body 엘리먼트를 할당했으나, 타입스크립트는 body 엘리먼트가 없을 상황도 예상하여 null일 수 있다고 알려준다.as 키워드와 함께 el이 body 엘리먼트로 사용될 것을 알려주어 타입 단언을 하면 타입스크립트가 인지하게 된다.getNumber 함수에
타입스크립트는 타입을 지정해주지 않아도 1. 초기화된 변수나 2. 기본값이 설정된 매개변수, 3. 반환값이 있는 함수 등을 통해 타입을 추론할 수 있다.
조건부 렌더링React에서의 조건부 렌더링은 JS에서의 처리와 같이 동작한다.위의 코드는 isLoggedIn props를 받아 Boolean 값에 따라 다른 컴포넌트를 렌더링한다.엘리먼트를 저장하기 위해 변수를 사용할 수 있다.위의 코드를 중괄호 안에 더 짧은 구문의
조건부 렌더링React에서의 조건부 렌더링은 JS에서의 처리와 같이 동작한다.위의 코드는 isLoggedIn props를 받아 Boolean 값에 따라 다른 컴포넌트를 렌더링한다.엘리먼트를 저장하기 위해 변수를 사용할 수 있다.위의 코드를 중괄호 안에 더 짧은 구문의
이벤트 처리하기React 엘리먼트에서의 이벤트 처리방식은 DOM 엘리먼트에서의 방식과 유사하다. 다만React는 camelCase를 사용한다.JSX를 통해 문자열이 아닌 함수로 이벤트핸들러를 전달한다.기본 동작을 방지할 때 preventDefault를 명시적으로 호출해
State and Lifecyclerender() 메서드의 this.props.date 를 this.state.date로 수정초기 this.state를 지정하는 constructor 추가 클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 한다.d
Components와 Props컴포넌트는 props라는 임의의 입력을 받아 화면에 어떻게 표시될 지 기술하는 React 엘리먼트를 반환한다.클래스 컴포넌트에는 몇 가지 추가 기능이 있다. 다만 함수 컴포넌트가 더 간결하다.컴포넌트를 정의하는 가장 간단한 방법위 함수는
엘리먼트 렌더링엘리먼트는 React 앱의 가장 작은 단위이며 화면에 표시할 내용을 기술한다.브라우저의 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다. ReactDOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.위의 div
JSX 소개JSX는 React 엘리먼트를 생성하는 문법이다.React는 JS파일 내에서 마크업과 로직을 포함하는 컴포넌트라는 느슨하게 연결된 유닛으로 관심사를 분리한다.JSX의 중괄호 안에는 모든 JS 표현식을 넣을 수 있다.JSX 표현식은 컴파일 후에 정규 JS 함수
Udemy의 React 강의를 수강하고 있다. 물론 좋은 강의이지만 영어로 되어 있어 자막과 코드 화면을 동시에 보느라 제대로 이해하지 못한 채 코드를 따라치기에도 바쁜 나를 발견했다. 더 깊고 정확한 이해를 위해 자습서: React 시작하기부터 시작해 공식문서를 읽으