유니의 개발일지

Component Class Component 생성자에서 state를 정의 setState() 함수를 통해 state 업데이트 Lifecycle methods 제공 Function Component state 사용불가 Lifecycle에 따른 기능 구현 불가 -> Hooks 기능 출현 -> class Component의 기능을 모두 구현할 수 있게 됨 Hooks 갈고리 : 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어들어가 같이 수행되는 것 hook의 이름은 모두 use로 시작함 가장 대표적인 Hooks useState() : state를 사용하기 위한 hook 사용법 const [변수명, set함수명] = useState(초기값); -> return 값으로 배열이 나옴 return된 배열에..

react component 중 class component와 관련된 내용 state 상태 JavaScript의 객체 리액트 component의 상태를 의미 -> 리액트 Component의 변경 가능한 데이터 개발자가 직접 정의함 중요한 점! 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함 / 그렇지 않은 값은 컴포넌트의 인스턴스 필드로 정의하면 됨 -> state가 변경될 경우 컴포넌트가 재렌더링되기 때문에 렌더링과 데이터 흐름에 관련 없는 값을 포함하면 불필요한 경우에 컴포넌트가 다시 렌더링되어 성능을 저하시킬 수 있기 때문 모든 클래스 컴포넌트에는 Constructor 함수가 존재함 -> 생성자 함수이며 클래스가 생성될 때 실행되는 함수 class component -> state..

실제 실습 내용 - create-react로 생성한 my-app 프로젝트에 chapter_05 폴더 생성 - Comment.jsx 코드 작성 import React from "react"; const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16, }, imageContainer: {}, image: { width: 50, height: 50, borderRadius: 25, }, contentContainer: { marginLeft: 8, display: "flex", flexDirection: "column", justi..

실제 실습 내용 - create-react로 만든 my-app 프로젝트를 열어 chapter_04 폴더 생성 - Clock.jsx 코드 작성 import React from "react"; function Clock(props){ return ( 안녕, 리액트! 현재 시간 : {new Date().toLocaleTimeString()} ); } export default Clock; - index.js 코드 변경 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; i..

Component 합성 : 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것 리액트는 컴포넌트 안에 또 다른 컴포넌트를 만들 수 있기에 복잡한 화면을 여러 개의 Component로 나눠서 구현 가능! Component 추출 : 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나눌 수 있음 컴포넌트의 재사용성이 올라감 -> 개발 속도도 향상됨

Component 만드는 방법 Component = Function Component 함수 컴포넌트 + Class Component Function Component 함수 컴포넌트 : 간단한 코드를 장점으로 가짐 Class Component : JavaScript ES6의 class 라는 것을 사용해서 만들어진 형태의 컴포넌트 리액트의 모든 클래스 컴포넌트는 React.Component를 상속받아서 만든다. Component 이름 짓는 방법 Component 이름은 항상 대문자로 시작해야 한다! cause, react는 소문자로 시작하는 컴포넌트를 DOM 태그로 인식하기 때문 const element = ; -> HTML div 태그로 인식 const element = ; -> Welcome이라는 리액트..

Props의 특징 1) Read-Only : 읽기 전용 / 값을 변경할 수 없음 ex) 붕어빵이 다 구워졌는데, 속재료를 바꿀 수 없는 것과 같음 If, 다른 Props의 값으로 앨리먼트를 생성하고 싶다면, 새로운 값을 컴포넌트에 전달하여 새로 Element를 생성 "Pure 함수" : 입력값 input을 변경하지 않으며, 같은 입력값에 대해서는 항상 같은 출력값 output을 리턴 " impure 함수" : 입력값 input을 변경함 "모든 리액트 컴포넌트는 그들의 Props에 관해서는 pure 함수 같은 역할을 해야 한다." : 모든 리액트 컴포넌트는 props를 직접 바꿀 수 없고, 같은 props에 대해서는 항상 같은 결과를 보여줄 것! Props 사용법 1) JSX를 사용하는 경우 키와 값으로 ..

Components : 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있음 레고 블록 조립하듯 컴포넌트들을 모아서 개발 리액트 컴포넌트는 개념적으로 자바스크립트의 함수와 비슷함 -> 입력을 받아서 정해진 출력을 냄 리액트 컴포넌트에서의 입력 : Props 출력 : React element 리액트 컴포넌트의 역할 : 어떠한 속성들을 입력으로 받아서 그에 맞는 react element를 생성하여 리턴해주는 것 마치, 붕어빵을 만드는 것과 비슷함 / 붕어빵 틀 = component Props : 리액트 컴포넌트의 입력 / 리액트 컴포넌트의 속성 prop의 복수형 -> prop은 property의 준말 (속성) ex) props = 붕어빵..

Elements의 특징 1) 불변성 immutable : 한번 생성된 엘리먼트는 변하지 않는다 것을 의미 엘리먼트 생성 후에는 Children이나 attributes를 바꿀 수 없음 -> 엘리먼트는 다양한 모습으로 존재할 수 있지만 한번 생성된 다음에는 변경이 불가능하다는 의미 *화면에 변경된 엘리먼트들을 보여주는 방법 : 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 만들면 된다 새로운 엘리먼트를 만들어서 기존 엘리먼트가 연결되어 있는 부분에 바꿔서 달면 된다. Elements 렌더링 : 엘리먼트를 생성한 이후에 실제로 화면에 보여주기 위해서 필요한 과정 : 이 div 태그 안에 리액트 엘리먼트들이 렌더링 됨 -> root DOM node 이 div 태그 안에 있는 모든 것이 react DOM..

Rendering Elements Elements란? : 어떤 물체를 구성하는 성분 / 리액트 앱을 구성하는 요소 Elements are the smallest building blocks of React apps. : 컴포넌트 유형과 속성 및 내부의 모든 지식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체 불변성을 가짐 리액트 앱을 구성하는 가장 작은 빌딩 블록들 화면에서 보이는 것들을 기술 엘리먼트가 기술한 내용을 토대로 실제 우리가 화면에서 보게 되는 dom element가 생성됨 React Elements vs. DOM Elements descriptor : 화면에 나타나는 내용을 기술하는 자바스크립트 객체 -> 최종적으로 나타나는 형태 = DOM Elements react element..