1. React.js
React.js는 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스를 구축하기 위한 효율적이고 유연한 도구이다. 주로 싱글 페이지 애플리케이션(SPA)을 만드는 데 사용되며, 컴포넌트 기반 아키텍처를 통해 재사용 가능하고 유지보수가 쉬운 UI를 만들 수 있다.
💡 React의 주요 특징
- 컴포넌트 기반 구조
- 가상 DOM (Virtual DOM)
- 단방향 데이터 흐름
- JSX 지원
- 선언적 UI
📌 주요 React 개념 및 API
개념/API | 설명 |
useState | 함수형 컴포넌트에서 상태 관리 |
useEffect | 부수 효과 처리 |
useContext | 컨텍스트 API 사용 |
useRef | DOM 요소 참조 및 값 보존 |
useMemo | 계산 결과 메모이제이션 |
useCallback | 함수 메모이제이션 |
💻 React 컴포넌트 예시 코드
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Counter;
💻 React 애플리케이션 구조
my-react-app/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── components/
│ │ ├── Header.js
│ │ └── Footer.js
│ ├── pages/
│ │ ├── Home.js
│ │ └── About.js
│ ├── App.js
│ └── index.js
├── package.json
└── README.md
💡 React 사용의 장점
- 효율적인 DOM 조작
- 재사용 가능한 UI 컴포넌트
- 큰 커뮤니티와 풍부한 생태계
- 성능 최적화 도구 제공
- 서버 사이드 렌더링 지원
💡 React를 시작하기 위한 도구
- Create React App
새 React 프로젝트를 빠르게 설정 - React Developer Tools
브라우저 확장 프로그램으로 React 컴포넌트 디버깅
npx create-react-app my-app
cd my-app
npm start
[React] 😇 React.js란?
이번 포스팅에서는 React가 무엇인지, 탄생 배경과 특징 그리고 정의를 구분지어 간단하게 정리해보려고 한다. 리액트(react.js)란 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들
velog.io
- 참고 : niboo.log
Re: React
React JS란?React는 프런트엔드 사용자 인터페이스를 build 할 수 있는 오픈 소스 JavaScript 라이브러리이며 페이스북의 지속적인 관리가 이루어 지고 있다. 전체 애플리케이션 프레임워크를 제공하는
cafe.daum.net
- 출처 : 데이터 과학자 + 프로그래머 세상 다음카페
2. JSX (JavaScript XML)
JSX는 React에서 사용하는 JavaScript의 확장 문법이다.
HTML과 유사한 마크업을 JavaScript 코드 안에서 작성할 수 있게 해 준다. (공식적인 JavaScript 문법은 아니다.)
JSX는 React 엘리먼트를 생성하는 간결하고 친숙한 방법을 제공한다.
💡 주요 특징
- JavaScript와 HTML의 결합
- 컴포넌트 기반 구조 지원
- 가독성과 유지보수성 향상
💻 JSX 사용 예시 코드
const element = <h1>Hello, JSX!</h1>;
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
🚀 JSX 문법
JSX는 JavaScript의 모든 기능을 지원하면서도 XML 같은 문법을 사용한다.
📌 주요 문법 규칙
규칙 | 설명 |
단일 루트 엘리먼트 | 최상위 레벨에 하나의 엘리먼트만 허용 |
닫힌 태그 | 모든 태그는 닫혀야 함 (<img />) |
camelCase 프로퍼티 명명 | HTML 속성은 camelCase로 작성 (className) |
JavaScript 표현식 | 중괄호 {} 안에 JavaScript 표현식 사용 가능 |
💻 JSX 문법 예시 코드
function App() {
const name = "John";
return (
<div className="app">
<h1>Welcome, {name}!</h1>
<img src="profile.jpg" alt="Profile" />
{name.length > 0 && <p>You have a name.</p>}
</div>
);
}
[React] 2. JSX란? (정의, 장점, 문법)
2. JSX란? (정의, 장점, 문법) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ [React 에서 사용하는 JSX ] 입니다. : ) 이번엔 React에서 자주 사용하게될 JSX에 대해 알아보도록 하자. 1. JSX란? - JSX(Javascript S
goddaehee.tistory.com
- 참고 : goddaehee
3. Props (Properties)
React 컴포넌트 간에 데이터를 전달하는 방법이다.
부모 컴포넌트에서 자식 컴포넌트도 데이터를 전달할 때 사용한다.
💡 주요 특징
- 읽기 전용 (분변성)
- 컴포넌트의 재사용성 증가
- 단방향 데이터 흐름 지원
💻 Props 사용 예시 코드
// 부모 컴포넌트
function ParentComponent() {
return <ChildComponent name="John" age={30} />;
}
// 자식 컴포넌트
function ChildComponent(props) {
return (
<div>
<p>Name: {props.name}</p>
<p>Age: {props.age}</p>
</div>
);
}
📌 Props 관련 주요 개념
개념 | 설명 |
기본값 설정 | defaultProps를 사용하여 기본값 정의 |
타입 검사 | propTypes를 사용하여 prop 타입 검사 |
구조 분해 할당 | prop 객체를 개별 변수로 분해 |
💻 예시 코드
import PropTypes from 'prop-types';
function Greeting({ name = 'Guest' }) {
return <h1>Hello, {name}!</h1>;
}
Greeting.propTypes = {
name: PropTypes.string
};
// 사용
<Greeting name="Alice" />
Components와 Props – React
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
- 참고 : ko.legacy.reactjs.org
#2 JSX와 Props
안녕하세요! 오늘 작성해볼 리액트 주제는 JSX와 Props라는 주제입니다. 지난 글에서는 리액트 프로젝트 준비, 생성 과정을 해보았는데요, 이번에는 리액트 코드들을 만져보며 리액트의 기본적인
velog.io
- 참고 : console.log
React 컴포넌트와 props 개념 이해하기
Components와 Props
www.snugarchive.com
- 참고: http://www.snugarchive.com
'에이콘아카데미 회고 > 5회차) 자바기반 풀스택 개발자 양성과정' 카테고리의 다른 글
React) 69번째 회고 (1) | 2024.07.30 |
---|---|
React) 68번째 회고 (0) | 2024.07.29 |
Spring, Spring Boot) 66번째 회고 (0) | 2024.07.25 |
Spring, Spring Boot) 65번째 회고 (0) | 2024.07.24 |
Spring, Spring Boot) 64번째 회고 (0) | 2024.07.23 |
1. React.js
React.js는 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스를 구축하기 위한 효율적이고 유연한 도구이다. 주로 싱글 페이지 애플리케이션(SPA)을 만드는 데 사용되며, 컴포넌트 기반 아키텍처를 통해 재사용 가능하고 유지보수가 쉬운 UI를 만들 수 있다.
💡 React의 주요 특징
- 컴포넌트 기반 구조
- 가상 DOM (Virtual DOM)
- 단방향 데이터 흐름
- JSX 지원
- 선언적 UI
📌 주요 React 개념 및 API
개념/API | 설명 |
useState | 함수형 컴포넌트에서 상태 관리 |
useEffect | 부수 효과 처리 |
useContext | 컨텍스트 API 사용 |
useRef | DOM 요소 참조 및 값 보존 |
useMemo | 계산 결과 메모이제이션 |
useCallback | 함수 메모이제이션 |
💻 React 컴포넌트 예시 코드
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Counter;
💻 React 애플리케이션 구조
my-react-app/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── components/
│ │ ├── Header.js
│ │ └── Footer.js
│ ├── pages/
│ │ ├── Home.js
│ │ └── About.js
│ ├── App.js
│ └── index.js
├── package.json
└── README.md
💡 React 사용의 장점
- 효율적인 DOM 조작
- 재사용 가능한 UI 컴포넌트
- 큰 커뮤니티와 풍부한 생태계
- 성능 최적화 도구 제공
- 서버 사이드 렌더링 지원
💡 React를 시작하기 위한 도구
- Create React App
새 React 프로젝트를 빠르게 설정 - React Developer Tools
브라우저 확장 프로그램으로 React 컴포넌트 디버깅
npx create-react-app my-app
cd my-app
npm start
[React] 😇 React.js란?
이번 포스팅에서는 React가 무엇인지, 탄생 배경과 특징 그리고 정의를 구분지어 간단하게 정리해보려고 한다. 리액트(react.js)란 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들
velog.io
- 참고 : niboo.log
Re: React
React JS란?React는 프런트엔드 사용자 인터페이스를 build 할 수 있는 오픈 소스 JavaScript 라이브러리이며 페이스북의 지속적인 관리가 이루어 지고 있다. 전체 애플리케이션 프레임워크를 제공하는
cafe.daum.net
- 출처 : 데이터 과학자 + 프로그래머 세상 다음카페
2. JSX (JavaScript XML)
JSX는 React에서 사용하는 JavaScript의 확장 문법이다.
HTML과 유사한 마크업을 JavaScript 코드 안에서 작성할 수 있게 해 준다. (공식적인 JavaScript 문법은 아니다.)
JSX는 React 엘리먼트를 생성하는 간결하고 친숙한 방법을 제공한다.
💡 주요 특징
- JavaScript와 HTML의 결합
- 컴포넌트 기반 구조 지원
- 가독성과 유지보수성 향상
💻 JSX 사용 예시 코드
const element = <h1>Hello, JSX!</h1>;
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
🚀 JSX 문법
JSX는 JavaScript의 모든 기능을 지원하면서도 XML 같은 문법을 사용한다.
📌 주요 문법 규칙
규칙 | 설명 |
단일 루트 엘리먼트 | 최상위 레벨에 하나의 엘리먼트만 허용 |
닫힌 태그 | 모든 태그는 닫혀야 함 (<img />) |
camelCase 프로퍼티 명명 | HTML 속성은 camelCase로 작성 (className) |
JavaScript 표현식 | 중괄호 {} 안에 JavaScript 표현식 사용 가능 |
💻 JSX 문법 예시 코드
function App() {
const name = "John";
return (
<div className="app">
<h1>Welcome, {name}!</h1>
<img src="profile.jpg" alt="Profile" />
{name.length > 0 && <p>You have a name.</p>}
</div>
);
}
[React] 2. JSX란? (정의, 장점, 문법)
2. JSX란? (정의, 장점, 문법) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ [React 에서 사용하는 JSX ] 입니다. : ) 이번엔 React에서 자주 사용하게될 JSX에 대해 알아보도록 하자. 1. JSX란? - JSX(Javascript S
goddaehee.tistory.com
- 참고 : goddaehee
3. Props (Properties)
React 컴포넌트 간에 데이터를 전달하는 방법이다.
부모 컴포넌트에서 자식 컴포넌트도 데이터를 전달할 때 사용한다.
💡 주요 특징
- 읽기 전용 (분변성)
- 컴포넌트의 재사용성 증가
- 단방향 데이터 흐름 지원
💻 Props 사용 예시 코드
// 부모 컴포넌트
function ParentComponent() {
return <ChildComponent name="John" age={30} />;
}
// 자식 컴포넌트
function ChildComponent(props) {
return (
<div>
<p>Name: {props.name}</p>
<p>Age: {props.age}</p>
</div>
);
}
📌 Props 관련 주요 개념
개념 | 설명 |
기본값 설정 | defaultProps를 사용하여 기본값 정의 |
타입 검사 | propTypes를 사용하여 prop 타입 검사 |
구조 분해 할당 | prop 객체를 개별 변수로 분해 |
💻 예시 코드
import PropTypes from 'prop-types';
function Greeting({ name = 'Guest' }) {
return <h1>Hello, {name}!</h1>;
}
Greeting.propTypes = {
name: PropTypes.string
};
// 사용
<Greeting name="Alice" />
Components와 Props – React
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
- 참고 : ko.legacy.reactjs.org
#2 JSX와 Props
안녕하세요! 오늘 작성해볼 리액트 주제는 JSX와 Props라는 주제입니다. 지난 글에서는 리액트 프로젝트 준비, 생성 과정을 해보았는데요, 이번에는 리액트 코드들을 만져보며 리액트의 기본적인
velog.io
- 참고 : console.log
React 컴포넌트와 props 개념 이해하기
Components와 Props
www.snugarchive.com
- 참고: http://www.snugarchive.com
'에이콘아카데미 회고 > 5회차) 자바기반 풀스택 개발자 양성과정' 카테고리의 다른 글
React) 69번째 회고 (1) | 2024.07.30 |
---|---|
React) 68번째 회고 (0) | 2024.07.29 |
Spring, Spring Boot) 66번째 회고 (0) | 2024.07.25 |
Spring, Spring Boot) 65번째 회고 (0) | 2024.07.24 |
Spring, Spring Boot) 64번째 회고 (0) | 2024.07.23 |