G_NooN in Dev G_NooN in Dev

DOM ( Document Object Model ): 웹 페이지의 컴포넌트 구조 (= 태그) 를 트리(Tree) 형태로 표현한 모델DOM 주요 용어- 문서 (Document) : 웹 페이지 / 화면- 요소 (Element) : 페이지 / 화면을 구성하는 컴포넌트- 노드 (Node) : 트리의 각 요소 : 상위 Element 는 하위 Element 를 포함하고 있다.렌더링 ( Rendering )화면에 출력시킬 UI 컴포넌트를 구성하는 작업 종류초기 렌더링이후 렌더링 (= 리렌더링 ( Re-Rendering ))렌더링 절차1. 렌더링 트리거 ( Rendering Trigger ) - 렌더링 유발2. 컴포넌트 렌더링 ( Component Rendering ) - 렌더링 수행3. DOM 커밋 ( DOM Co..

Props 의 한계기존의 Props 를 사용하면, 하나의 컴포넌트 파일을 사용하여 내용만 다른 여러 개의 컴포넌트를 만들 수 있다. 하지만 props 자체로는 몇 가지 한계가 존재한다.내용을 설정하기 위해서는 반드시 상위 컴포넌트에서 값을 내려받아야 한다.상위 컴포넌트로부터 받은 값은 수정할 수 없다. 이를 보완하기 위한 방식이 바로 State 다.StateReact 컴포넌트 내부에서 동적으로 사용 및 관리되는 데이터(값) 특징관리하고자 하는 컴포넌트의 내부에서 선언된다.값은 얼마든지 수정 가능하며, 초기값 설정이 가능하다.값이 변경되면, 화면이 새로 렌더링(Rendering) 된다.State 의 선언 및 관리 방식 대표적인 방식으로 useState 와 useReducer 가 있다. useState: 일..

우리가 보고 이용하는 페이지에는 다양한 요소들이 포함되어 있다. 아래 페이지를 예시로 들어보자. 이 페이지에 보이는 부분은 다음과 같다.위치요소좌측 상단Google 정보, 스토어 우측 상단Gmail, 이미지, 실험실, 메뉴, MyPage중앙로고, 검색창, 입력 도구, AI 모드, 검색버튼, I'm Feeling Lucky하단국가명, 광고, 비즈니스, 검색의 원리, 개인정보처리방침, 약관 설정 각 요소들은 모두 다른 역할을 수행한다. 하지만 각 위치에 속하는 요소들은 모두 비슷한 형태를 가지고 있다. 여기서 우리는 컴포넌트의 정의와 특성을 알 수 있다.컴포넌트 (Component): 특정 기능* 을 수행하는 독립적인 모듈 (* 특정 기능 : 비즈니스 로직 처리, UI 구성 등): 재사용이 가능함 버튼(Bu..