props 활용 component의 props 디자인 패턴을 알아보자 props 설계 props 전개 컴포넌트로 전달된 props 객체를 전개(spread) 하여 컴포넌트의 내부의 구조에 모두 추가할 수 있다. 다만, props 객체의 소성을 전개하였을 때 사용된 external과 같은 비 표준 속성은 오류를 발생 시킴 > 이런 경우 컴포넌트로 전달된 props에서 비 표준 속성을 걸러내어 문제를 해결 할 수 있다. props 검사 propTypes를 사용하여 컴포넌트에 전달된 props를 검사 className 병합 props 전개 코드의 순서에 따라 기존 속성을 덮어쓰거나, 전달된 속성이 덮어써지는 문제가 발생 > 이러한 문제를 해결하려면 컴포넌트 내부에서 조건 처리 하거나, classnames 라이브러리를 활용 as 속성 컴포넌트 내부의 DOM 노드 중 특정 노드를 외부에서 변경할 수 있도록

Styled Component React 컴포넌트 시스템 구조에서 CSS를 보다 효율적으로 작성하기 위한 library 공식문서 JavaScript로 CSS 작성 React, React Native에서 활용 가능 Styled Component 특징 1. CSS -> JavaScript 자동 변경 렌더링 되는 컴포넌트를 추적해 CSS로 작성된 스타일을 React에서 처리 가능한 JS 스타일 객체로 변경 2. 고유한 class 속성 설정 렌더링 될 때, DOM 요소에 고유한 class 속성 이름을 설정 3. 컴포넌트에서 CSS 관리 스타일이 특정 컴포넌트에 묶여 있어, 컴포넌트를 사용하지 않을 경우 불필요한 스타일 코드가 남아있지 않는다. 즉, 사용된 컴포넌트 스타일 코드만 렌더링 과정에서 처리됨

React Hooks 훅(Hook)은 함수형 컴포넌트에 리액트의 다른 기능들을 갈고리처럼 연결해주는 것 Hook은 React v16.8부터 사용 가능한 새로운 기능 리액트에서 기본적으로 제공되는 Hook들은 use로 시작하는 함수들 Hook은 함수형 컴포넌트가 리엑트 렌더링 과정에서 항상 같은 순서로 호출되는 규칙을 이용하여 호출순서를 이용하여 상태 매칭 훅(Hook)의 규칙 React 함수형 컴포넌트 안에서만 사용 컴포넌트 안의 반복문, 조건문, 중첩된 함수 안에서 훅 사용 ❌ useState React의 useState()를 사용하면 함수형 컴포넌트에도 state를 설정할 수 있다. state와 state를 업데이트하는 함수를 쌍으로 제공 useState()는 전달 받는 인자로 state의 초기 값을 설정 (첫 렌더링 될 때 딱 한번 사용) 클래스 컴포넌트의 this.state와 차이점 `use

HOC(Higher-Ordered Component) > 고차(高次) 고차(Highter-order)의 의미는 '상위 차원(수준)'이다. 사전적 의미는 '생각이나 행동 따위의 수준이나 정도가 높은 것'을 말하며 수학에서는 '높은 차수(3차 이상)'을 뜻한다. (고차 방정식, 고차 부등식) 고차 함수 함수형 프로그래밍에서는 함수는 값(value)으로 취급된다. 즉, 함수에 숫자, 문자 데이터를 전달하듯 함수 또한 다른 함수에 값으로 전달할 수 있다. 마찬가지로 함수를 값으로 반환하는 것도 가능 하나 이상의 함수를 인자로 전달 받는다. ((fn) => {}) 함수를 결과로 반환 한다. (() => fn) 고차 컴포넌트 컴포넌트 로직을 재사용하기 위한 React 고급 프로그래밍 기술 React API는 아니지만, React 프로그래밍에서 자주 활용된다. 컴포넌트를 전달 받아 새로운 컴포넌트를 반환하는 함수 >

Form Control 입력값을 받는 element들에게 value값으로 state를 걸어주고 setState() 메서드를 사용하여 상태를 변경하는 이벤트 핸들러를 만들어 이벤트를 걸어준다. Controlled 컴포넌트 React 컴포넌트는 폼을 통해 입력된 사용자의 값을 제어 할 수 있다. React를 통해 값이 관리되는 입력 요소는 컨트롤 컴포넌트(Controlled Component)이다. Controlled Component를 사용하면 모든 state의 업데이트는 연결 된 이벤트 리스너에 의해 처리 된다. Controlled Component를 통해 사용자의 입력 내용을 업데이트 하거나, 유효성검사 수행이 가능하다. 멀티 이벤트 핸들링 하나 이상의 ``을 하나의 리스너로 컨트롤 할 수 있다. 여러 개의 컨트롤을 제어하기 위해서는 name 속성을 설정해야 한다. TextArea Controll Reac

Context API Context는 React 컴포넌트 트리 안에서 데이터를 글로벌(Global)하게 공유할수 있도록 고안된 방법 React는 복잡한 컴포넌트 트리의 상태 공유 문제를 해결하기 위한 방법으로 Context API를 제공한다. Context API를 사용하면 상위 컴포넌트에서 하위에 종속된 모든 컴포넌트에 데이터를 공급(Provider)한 후, 특정 위치의 컴포넌트에서 바로 수요(Consumer)하도록 설정할 수 있다. .png) > Context의 주된 사용 목적은 복잡하게 "중첩 된" 하위 컴포넌트(들)에 데이터를 공유하는 것 Context를 사용하면 컴포넌트 재사용이 어려우므로 꼭 필요한 경우에만 사용!! 컨텍스트 생성 React.createContext A

컴포넌트 통신 컴포넌트는 로컬 데이터인 state(상태)를 가질 수 있다. React 프로그래밍시에는 상위 컴포넌트가 공유가 필요한 state를 관리하고 하위 컴포넌트는 부모 컴포넌트와 통신하여 state를 공유한다. 즉, props객체를 통해 상위 컴포넌트의 state를 하위 컴포넌트에 전달 > 스코프 체인(Scope Chain) 일반적으로 웹 브라우저의 환경인 Javascript는 스코프 체인에 의해 상위(부모) 영역으로 거슬러 데이터를 참조하지만, React에서는 각 컴포넌트의 state(상태)데이터가 스코프 체인되지 않는다. 메서드(함수) 전달 상위 컴포넌트는 props를 통해 하위 컴포넌트에 속성을 전달 할 수 있다. 컴포넌트의 함수 또한 속성이므로 props로 전달할 수 있다. 하위 컴포넌트는 전달 받은 메서드를 특정 시점에 실행(callback)하여 상위 컴포넌트의 상태에 접근하여 업데이트 가능 상태 공유

이벤트 핸들링 React 요소에서 이벤트를 핸들링 하는 방식은 DOM 요소의 이벤트 핸들링 방식과 유사 |차이점|예시| |--|--| |이벤트 속성이름은 camelCase 형식으로 작성|onClick, onKeyDown, onFocus, onChange 등| |이벤트 리스너 연결은 JSX 인터폴레이션|``| |브라우저 기본 동작 방지지|event.preventDefault() 메서드만 허용| React의 합성 이벤트 > React의 이벤트 리스너는 모든 브라우저에서 동일한 이벤트를 처리하기 위한 이벤트 래퍼 객체를 전달받는다. 합성(Synthetic)이벤트 객체는 preventDefault,stopPropagation메서드를 포함하며 인터페이스는 브라우저의 표준 이벤트 모델과 동일 React 이벤트 핸들링 React 이벤트 연결은 이벤트 속성 이름 표기는 camelCase

Life Cycle 생명은 시간의 흐름에 따라 시시각각 변화(태어남 -> 성장(변화) -> 죽음)한다. 마찬가지로 컴포넌트도 이러한 생명주기에 따라 다양한 라이프사이클 메서드가 제공된다. Life Cycle Method 컴포넌트의 라이프 사이클을 크게 나누면 다음의 3단계로 진행됨 Mount 컴포넌트 인스턴스를 만들고 DOM에 삽입할 때 다음 순으로 메소드 실행됨 부모 자식 컴포넌트 간의 라이프사이클 순서 부모 컴포넌트 생성 부모 컴포넌트 render() 자식 컴포넌트

State(상태) 컴포넌트 UI를 위한 데이터를 보관하는 오브젝트 state(상태)를 통해 데이터가 업데이트가 발생하면 리액트가 자동으로 render()를 호출 state는 컴포넌트가 소유한 로컬 데이터로 적용 범위는 현재 컴포넌트에 한정된다. 컴포넌트는 자신의 state를 초기화하거나 업데이트 할 수 있다. state는 불변(Immutable) 객체이다. 즉, 객체에 변형을 가해선 안된다. 변형을 가하는 대신, 비교를 통해 교체하는 방법을 사용해 불변 객체를 유지한다. Immutable 객체의 사용 이유 > 일반적으로 객체가 참조를 통해 공유되어 있다면 상태가 언제든지 변경 될 가능성도 커져 문제가 제기된다. 반면 불변 객체는 객체를 복제할 때 객체 전체가 아니라 단순 참조만 복사하고 끝낸다. 참조는 보통 객체 그 자체보다 훨씬 작아서(전형적으로 포인터 크기), 메모리가 절감되며 프로그램 성능 향상

Props(전달속성) 컴포넌트 밖에서 주어지는 데이터 > props는 부모 -> 자식으로 단방향(1-way) 흐름으로 전달된다. 컴포넌트에 설정된 임의의 JSX 속성(type, children 등)은 React에 의해 컴포넌트에 속성(props) 객체로 전달한다. 전달된 값은 props 객체의 각 속성으로 설정된다. 전달된 컴포넌트 속성 객체 props는 컴포넌트 내부에서 컴파일에 활용된다. 컴포넌트에 전달된 속성(props)객체는 읽기 전용(readonly) 전달 받은 props 값을 수정하면 안된다. 전달 받은 props 값을 수정하는 대신 컴포넌트 상태(state)를 활용 컴포넌트의 재사용성을 높임!! props.children vue.js에 slot과 같은 개념 data binding을 바깥(부모)에서 해준 것!! component에 content를 children이라는

Virtual DOM React는 상태 변경이 감지되면 Virtual DOM을 다시 그려 실제 DOM을 업데이트 한다. 잦은 DOM 조작은 비용이 많이 들고 속도가 느려진다. React는 Virtual DOM을 사용하여 성능(속도)을 향상시키는 방식을 채택 Virtual DOM의 컴포넌트를 지속적으로 관찰하여 상태 변경을 감지하려 시도 Virtual DOM의 이전, 이후 비교는 diff 알고리즘을 사용하여 효율적으로 처리 비교 결과 차이가 발생하면 실제 DOM에 반영해 UI를 업데이트 ReactDOM ReactDOM 모듈은 React 요소로 구성된 Virtual DOM을 실제 DOM에 장착(Mount)시켜 렌더링(Rednering)하는 역할을 수행 > ReactDOM.render 동작 방식 domNode의 콘텐츠를 제어합니다. 처음 호출할 때 기존의 DOM 요소를 교체하며, 이후 호출에서는 React의 DOM 비교(

JSX(Javascript Syntax eXtension) JavaScript를 확장한 문법 JSX가 하는 일은 React 요소(element)를 만드는 것 React 요소는 실제 DOM 요소가 아닌 Js 객체 JSX는 HTML과 유사한 문법인 자바스크립트 코드 html처럼 간편하게 마크업 가능 {}를 이용하여 비즈니스 로직을 작성할 수 있다. JSX도 표현식 if 구문 및 for loop 안에 사용 가능하고, 변수에 할당 및 인자로 받아들이고 함수로 반환 가능 다수의 태그를 리턴할 수 없다. (형제노드 사용불가) 한 가지 태그로 감싸줘야한다. 단순히 묶어줄때는 ` 또는 ` 태그를 사용 HTML과 차이점 JSX는 HTML보다 JS에 가깝기 떄문에 React DOM은 HTML attribute 대신 camelCase 프로퍼티 명명규칙을 따름 -

React Components 화면상에 보여지는 UI 단위 react library를 이용하여 component 설계방법으로 class, function이 있다. 컴포넌트 이름은 항상 대문자로 시작하는 PascalCase 문법 사용을 권장 HTML 표준 요소와 구분하기 위해 > 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타냅니다. UI 일부가 여러 번 사용되거나 (Button, Panel, Avatar), UI 일부가 자체적으로 복잡한 (App, FeedStory, Comment) 경우에는 별도의 컴포넌트로 만드는 게 좋습니다. Class Component react에서 제공하는 'Component Class'를 상속해서 만들 수 있다. component에 상태 데이터를 담을 수 있는 state Object가 있고 상태에 따라 동적으로 렌더링된다. state가 변경이되면

🤔 React.js란..? Facebook 소프트웨어 엔지니어 Jordan Walke에 의해 탄생 프레임워크가 아닌 라이브러리로 따로 정해진 골격이 없으므로 원하는 구조로 설계 필요한 기능에 따라 라이브러리를 골라 사용 강력한 커뮤니티 형성으로 인해 문서화가 잘되있다. 선언형(Declarative) 프로그래밍 Re-render the whole app on every update 전달 속성 props, 상태 state 변경 감지 -> UI 없데이트(Rendering) 컴포넌트(Component)기반 프로그래밍 캡슐화 된 컴포넌트 로직(Logic)은 템플릿(Template)이 아닌, JSX(Javascript XML) React(web), React Native(mobile app), React Electron(desktop app) 1석 3조 React concep React는 UI 제작