DDOstory

🖨️ Component컴포넌트 기반의 구조라는 중요한 특징을 가지고 있음모든 페이지가 컴포넌트로 구성되어 있으며 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성컴포넌트를 끼워 맟춰서 새로운 컴포넌트를 개발하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어 자연스레 개발 시간과 유지 보수 비용도 줄일 수 있음자바스크립트의 함수와 비슷React 컴포넌트의 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴React 컴포넌트는 만들고자 하는 대로 props. 즉 속성을 넣으면 해당 속성에 맞춰 화면에 나타날 엘리먼트를 만들어주는 것🖨️ Props리액트 컴포넌트의 입력Props는 prop 뒤에 복수형을 나타내는 s를 붙여서 props이 여러 ..

😭 Automatic Batching앞에서 배운 것처럼 리액트 컴포넌트는 상태가 업데이트될 때마다 재렌더링이 이뤄지기 때문에, 함수 컴포넌트에서 각각의 스테이트가 업데이트될 때마다 재렌더링이 발생유즈 스테이트 훅을 사용해서 선언한 각 스테이트들의 set 함수를 거의 동시에 호출하더라도 호출된 횟수만큼 재렌더링이 발생이러한 문제를 해결하기 위해서 여러 상태의 업데이트가 동시에 발생하면 이 작업들을 묶어서 한번에 처리하는 것이 배칭배칭은 컴퓨터 공학에서 여러 가지 작업을 한 번에 처리한다는 의미를 갖고 있음리액트에서의 배칭은 여러 상태의 업데이트 작업을 한 번에 묶어서 처리하는 것이라고 이해하면 됨기존 리액트 버전에서는 이러한 배칭이 리액트 이벤트 핸들러 내에서만 이루어짐리액트 버전 18에서 오토메틱 배칭..

React 리액트 테마 변경 기능메인 컨텐츠 컨포넌트는 씸 컨텍스트로부터 현재 설정된 테마 값을 받아와 실제 화면의 컨텐츠를 렌더링하는 역할테마 변경 버튼을 누를 경우 씸 컨텍스트로부터 받은 roggleTheme함수를 호출하여 씸 컨텍스트의 값을 변경하는 역할도 함Theme 컨텍스트의 값을 가져오기 위해 Theme 컨텍스트.consumer 컴포넌트를 사용하는 방법 대신에 use-context-hook를 사용darkOrlight 컴포넌트는 방금 전에 만든 메인 컨텐츠 컴포넌트를 자식으로 갖고 있는데 이는 ThemeContext.Provider로 감싸서 theme-context의 값을 하위 컴포넌트들이 사용할 수 있도록 해줌SimContext.Provider로 감싸주지 않으면 하위 컴포넌트들이 SimCont..

[React] Card 컴포넌트 제작카드 컴포넌트는 하위 컴포넌트를 감싸서 카드 형태를 보여주는 컴포넌트두 가지 합성 방법을 모두 사용하여 구현children을 사용한 부분이 containment 이고 title과 background를 사용한 부분이 specialization이라고 할 수 있음카드 컴포넌트는 범용적으로 재사용이 가능한 컴포넌트프로필 카드 컴포넌트는 카드 컴포넌트를 사용하여 타이틀에 이름을 넣고 배경 색상을 녹색으로 설정children으로는 간단한 소개 글을 넣었음카드 컴포넌트가 사용자의 프로필을 나타내는 프로필 카드 컴포넌트가 됨배경색이나 타이틀 그리고 내부에 들어가는 컨텐츠들을 바꿔 보면서 다양한 카드를 만들어보는 것이 좋음 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 만들고, 만든 ..

notification 컴포넌트는 state에 아무런 값을 가지고 있지 않음 생성자에서는 앞으로 사용할 데이터를 state에 넣어서 초기화 클래스 컴포넌트에서 state를 업데이트 하려면 반드시 setState 함수 사용키는 리액트 엘리먼트를 구분하기 위한 고유의 값맵 함수를 사용할 때에는 필수적으로 들어가야 함❤️ state리액트 Component의 상태를 의미리액트 Component의 데이터라는 의미에 더 가까움리액트 Component의 변경 가능한 데이터미리 정해진 것이 아니라 리액트 Component를 개발하는 각 개발자가 직접 정의하여 사용렌더링이나 데이터 흐름에 사용되는 값만 state에 포함하여야 함state가 변경될 경우 Component가 재렌더링되기 때문에 렌더링과 데이터 흐름에 관련 ..

🧸  속성과 값이 같으면 1개만 기입객체를 정의할 때 속성과 값이 일치하면 축약 가능const language = 'JavaScript';const josh = { language};console.log(josh);🧸  컴포넌트 등록 방식에서의 축약 방법const doComponent = { template: 'Do Component'};new Vue({ components: { doComponent }});🧸  뷰 라우터 등록 방식에서의 축약 방법const router = new VueRouter({ //...});new Vue({ router});🧸  속성에 함수를 정의할 때 function 예약어 생략객체를 정의할 때 객체의 속성에 함수를 연결하여 사용하는 경우 많음const j..