2025/04 15

React 생명주기

1. React 생명주기 (Lifecycle)2. 생명주기를 활용하여 데이터 흐름 이해하기 1.React 생명주기 (Lifecycle)React의 생명주기는 컴포넌트가 생성되고 업데이트되며, 마지막으로 제거될 때까지의 과정을 나타냅니다. React에서는 컴포넌트의 생명주기를 관리하기 위해 다양한 메서드들이 제공되는데이를 통해 컴포넌트가 언제 무엇을 할지 제어할 수 있습니다. React의 생명주기는 크게마운팅(Mounting), 업데이트(Updating)언마운팅(Unmounting)의 세 가지 주요 단계로 나눌 수 있습니다. 1. 마운팅(Mounting)마운팅 단계는 컴포넌트가 DOM에 처음으로 삽입될 때 발생합니다. 이 단계에서 컴포넌트는 화면에 렌더링되기 전에 필요한 초기화 작업을 할 수 있습니다...

카테고리 없음 2025.04.14

React css

1. 문법적 설탕2. css-loader,style-loder css 방식3. Styled-components css 방식 1. 문법적 설탕프로그래밍 언어를 다룰 때, "문법적 설탕(Syntactic Sugar)"이라는 용어를 자주 들어본적이 있습니다.이 표현은 마치 설탕을 넣어서 음식이 더 맛있어지는 것처럼, 프로그래밍 언어의 문법을 더욱 읽기 쉽고 간결하게 만들어주는 기능을 의미합니다. 문법적 설탕을 통해 코드를 더 직관적으로 작성하고, 코드의 가독성을 높이며, 개발자가 코드를 작성하는데 필요한 노력을 줄여줍니다.문법적 설탕이란?문법적 설탕은 본질적으로 기능적으로는 기존 문법과 같지만, 더 간결하고 직관적인 방법으로 작성할 수 있도록 도와주는 문법 요소입니다. 기본적인 동작은 변화하지 않지만,..

카테고리 없음 2025.04.14

Reate 개발환경 구성 과 함수형 컴포넌트

1. reate 디렉토리 구조2. bev-server 3. 함수형 컴포넌트 1. reate 디렉토리 구조리액트 프로젝트에서는 컴포넌트를 어떻게 조직하는지가 중요합니다. 작업구역과 번들링 할 구역 컴포넌트 구역 등 명확하게 나누기 위해 디렉토리 구조를 잘 짜야합니다. 소스 코드 (src) 폴더src는 source(소스 코드)의 약자,프로젝트의 핵심 코드가 들어가는 폴더라는 것을 의미합니다.즉, 애플리케이션이 동작하는데 필요한 원본 코드가 포함된 폴더웹팩(Webpack)이나 바벨(Babel) 같은 도구가 이 폴더 안의 파일을 읽고 번들링(컴파일)하게 됩니다. /src│── /pages # 페이지 단위의 컴포넌트 (라우팅 용도)│ ├── Home.jsx│ ├── About.jsx│..

카테고리 없음 2025.04.14

Babel , Webpack

1. Babel 1.2  Babel  개념 과 사용법1.3  Babel 로 문법 바꾸기2. Webpack 2.2 Webpack 개념 과 사용법2.3 Webpack 로 번들링  1. Babel  Babel은 javascript 의 코드를 구형 브라우저에서도 실행해주도록 변환해주는 도구입니다. javascript는 빠르게 발전하는데 비하여 브라우저는 최신 문법을 바로 적용시키지 못하기에 브라우저가 코드를 지원하지 못하고 화면을 못뿌려주는 상황이 발전했습니다. Babel은 이러한 상황을 해결하기 위하여 javascript 문법을 구형 버전으로 다운그레이드 하여 브라우저가 지원하는 문법에 따라서 사용할 수 있게 만들어줍니다. 2014년: Babel(구 6to5) 등장 → 최신 ES6 문법을 ES5로 변환하는 역..

카테고리 없음 2025.04.14

React Class형 컴포넌트

목차1. Class 형 컴포넌트 부모,자식 구조 2. 컴포넌트를 활용한 구조분리 댓글 구현 실습 1 . Class 형 컴포넌트 부모,자식 구조  컴포넌트란(Component) 는 프로그래밍에서 재사용이 가능한 모듈을 뜻합니다. Class 형 컴포넌트는 Class 형태를 따라서 부모와 자식으로 구조를 나누어서 활용을하는데 props 를 사용합니다props 부모 => 자식 데이터는 항상 부모 => 자식 방향으로만 전달됨 부모에서 자식으로 데이터를 넘겨준다는 뜻으로 부모 요소에서 자식Class 컴포넌트에게 인자로 데이터를 넘겨주기 위해 활용합니다.  이는 리엑트의 단방향성 구조 때문인데 부모에서 자식으로 최소한의 State 관리를 위한 것인데 부모 Class 컴포넌트에서 State를 선언하고 자식 컴포넌트는 ..

카테고리 없음 2025.04.14