내가 생각하는 핵심 키워드 : useState, useEffect, Callback function 추가 학습이 필요한 키워드 : life cycle (생명주기), Callback function Hook은 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 사용할 수 있게 해주는 기능이다 클래스형 컴포넌트의 React state, lifecycle features를 연동(hook into)될 수 있도록 도와준다 Hook을 사용하는 이유는 기존 React의 여러 문제점 때문 - 컴포넌트 사이에서 상태와 관련된 로직의 재사용이 어려운 점 - 복잡한 컴포넌트들은 이해하기가 어려운 점(가독성, 로직 등) - 클래스는 코드의 재사용성과 구성을 어렵게 만든 것 뿐만 아니라, this의 원리를 알아야만 했다 위 문제점들..

이벤트는 사용자가 웹 브라우저에서 HTML 요소에 접근, 사용에 대한 사건의 발생을 의미한다 (또는 사용자가 아닌, 개발자의 의도에 따른 로직에 의해 발생될 수도 있다) 어떠한 방식이던 발생된 이벤트는 자바스크립트와 대응시킬 수 있다 HTML 요소 로딩, 사용자의 클릭(또는 더블클릭), 마우스 오버, 입력 등의 다양한 이벤트가 존재 이때, 이벤트 핸들러 함수로 다양한 로직을 처리하고 결과를 사용자에게 출력할 수 있다 (React 뿐만 아니라 다른 언어에서도 이벤트 핸들러 함수는 다양한 방식으로 활용되고 있다) [이벤트 핸들링 방법] React에서 이벤트 핸들링은 대표적으로 아래의 두 가지 방법이 존재한다 1. 핸들링 함수 선언 별도의 함수 선언 후 요소에 넘겨주는 방법 2. 익명 함수로 처리 이벤트 할당..

내가 생각하는 핵심 키워드 : import { useState }, State, setState 추가 키워드 : Spread Syntax (https://wildcard.tistory.com/entry/JavaScript-전개-구문Spread-Syntax) 1. State - Component 내에서 유동적으로 변할 수 있는 값을 저장하여 관리하기 위해 사용 - 개발자가 의도한 동작에 의해 변할 수도, 사용자의 입력에 따라 새로운 값으로 변경될 수 있다 - State 값이 변경되고 재렌더링이 필요한 경우, React가 자동으로 계산하여 변경점을 렌더링 2. State 사용시 유의사항 - State 값을 직접 변경하게 되면 React는 이를 인지하지 못하고 재렌더링 또한 수행하지 않는다 - State를 변..

내가 생각하는 핵심 키워드 : Props, DOM Element, Attribute, Destructuring assignment(구조 분해 할당) 1. Props (속성, Property) 부모 컴포넌트로부터 받아온 데이터를 자식 컴포넌트에 전달할 때 사용 (컴포넌트의 재사용성을 위한 방식으로 재사용성이 크게 증가하며 효율적) React 특징 중 하나인 단방향 데이터플로우(One-way reactive data flow) 형식이 적용 즉, 데이터 전달 시 부모 → 자식은 가능하지만, 자식 → 부모는 불가능함을 의미 이러한 특징으로 props에 있는 데이터는 수정이 불가능하며, 오직 꺼내서 사용만 가능하다 (읽기 전용을 의미, 만약 값을 변경하고 싶다면 새로운 변수를 생성 후 사용) 넘겨줄 수 있는 데이..

추가 예정

웹 프레임워크, 자바스크립트 라이브러리 중 하나로 사용자 인터페이스를 만들기 위해 사용 Facebook에서 제공하는 프론트엔드 라이브러리로 SPA, Mobile 개발에 사용된다 React를 굳이 사용하지 않아도 웹을 만들 순 있지만, 사용자와의 인터렉션으로 동적인 UI를 쉽게 구현할 수 있다는 장점이 있다 React 의 특징 1) JS 기반 별도의 프레임워크를 배우는 것이 아닌 JS를 활용 (언어를 배울 필요 없이 HTML, JS로도 개발) 2) 선언형 UI를 쉽고 간결하게 만들어준다디자인 뷰와 연결된 데이터 변경 시 이에 맞는 컴포넌트들을 렌더링해서 화면을 구성 3) 컴포넌트 컴포넌트 단위의 요소 별로 개발이 가능 (재사용성, 활용도 증가) JS, JSX를 알면 구현이 가능하기에 개발과 유지보수를 하는..