내가 생각하는 핵심 키워드 : Map Function 사용자로부터 입력을 받아 데이터를 처리할 수 있는 Form 선행 : State, Event (Javascript) [State] - Component 내에서 유동적으로 변할 수 있는 값을 의미 (원래는 Class component에서만 가능했지만, 현재는 Function component를 많이 사용) - 개발자가 의도한 동작에 따라서 또는 사용자의 입력에 따라 값이 변경될 수 있다 (단, State의 값을 변경하는 것이 아닌 setState 함수를 return해서 변경해야 한다) - State 값이 변경되면 React가 자동으로 변경된 부분을 계산 후 재렌더링 한다 [State의 변경 방법] State의 변경 방법에는 두 가지가 있었다 현재 값을 기..

내가 생각하는 핵심 키워드 : Memoization, .current(useRef) useMemo - 지정한 State나 Props가 변경될 경우 해당 값을 활용해 계산된 값을 메모이제이션, 재렌더링 시 불필요한 연산을 줄인다 - 연산은 렌더링 단계에서 이루어지기 때문에 시간이 오래 걸리는 로직을 작성하지 않는 것을 권장 (메모리의 한 공간을 계속해서 점유하고 있어야하기 때문에 잘못 사용시 성능 저하 이슈 발생) - string, number 뿐만 아닌, object, array, function 등 모든 자바스크립트 연산 결과를 메모이제이션 [useMemo 사용 예시] const multi = useMemo(() => { return first * second }, [first, second]) fir..

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

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

추가 학습이 필요한 키워드 : 불변성(원시값, 참조값), [깊은 복사, 얇은 복사], concat 전개 구문이라는 표현 그대로 배열 혹은 객체들을 펼칠 수 있게 해주는 JS 문법 전개하고자 하는 배열 또는 객체 앞에 점( . ) 세 개를 붙여주는 것으로 사용할 수 있다 단, 배열은 배열에 맞는, 객체는 객체에 맞는 데이터를 담을 공간이 필요한 점 유의 1. 배열 위 내용에 근거하면 Fruits_SS 안에 Fruits와 동일한 배열의 데이터가 저장되어 있을 것이다 Fruits와 Fruits_SS에 인덱스 번호, length, 데이터의 결괏값까지 완벽하게 동일한 것을 확인 하지만, 둘은 서로 다른 독립적인 배열임을 마지막 console.log 비교문을 통해 확인할 수 있다 배열에 데이터를 Spread Syn..

내가 생각하는 핵심 키워드 : 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에 있는 데이터는 수정이 불가능하며, 오직 꺼내서 사용만 가능하다 (읽기 전용을 의미, 만약 값을 변경하고 싶다면 새로운 변수를 생성 후 사용) 넘겨줄 수 있는 데이..

1. 함수(Function) 반복되는 작업을 수행하거나 값을 계산하는 문장들을 분류해놓은 집합 함수를 사용하기 위해서는 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 한다 2. 함수 선언 - 함수의 이름 - 괄호 안에 쉼표로 분리되는 매개변수 - 중괄호 { } 안에서 해당 함수가 어떤 동작을 할지 정의하는 표현 기본적인 함수의 형태 name : 함수의 이름, (a, b) : 매개변수, { } : 함수의 동작을 정의할 영역 my_car 객체를 생성, 변수 x에 my_car 객체의 요소 중 make 요소를 할당 이후 myFunc이라는 이름을 가진 함수를 호출하면 함수 안으로 이동 함수는 car_object 매개변수를 가지며 해당 매개변수에는 my_car.make의 값을 할당 함수는 car_object..

추가 예정

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