React) 67번째 회고

2024. 7. 26. 22:13·에이콘아카데미 회고/5회차) 자바기반 풀스택 개발자 양성과정
목차
  1. 1. React.js
  2. 2. JSX (JavaScript XML)
  3. 3. Props (Properties)

1. React.js

React.js는 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스를 구축하기 위한 효율적이고 유연한 도구이다. 주로 싱글 페이지 애플리케이션(SPA)을 만드는 데 사용되며, 컴포넌트 기반 아키텍처를 통해 재사용 가능하고 유지보수가 쉬운 UI를 만들 수 있다.

 

💡 React의 주요 특징

  1. 컴포넌트 기반 구조
  2. 가상 DOM (Virtual DOM)
  3. 단방향 데이터 흐름
  4. JSX 지원
  5. 선언적 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 사용의 장점

  1. 효율적인 DOM 조작
  2. 재사용 가능한 UI 컴포넌트
  3. 큰 커뮤니티와 풍부한 생태계
  4. 성능 최적화 도구 제공
  5. 서버 사이드 렌더링 지원

 

💡 React를 시작하기 위한 도구

  1. Create React App
    새 React 프로젝트를 빠르게 설정

  2. 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 엘리먼트를 생성하는 간결하고 친숙한 방법을 제공한다.

 

💡 주요 특징

  1. JavaScript와 HTML의 결합
  2. 컴포넌트 기반 구조 지원
  3. 가독성과 유지보수성 향상

 

💻 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 컴포넌트 간에 데이터를 전달하는 방법이다.
부모 컴포넌트에서 자식 컴포넌트도 데이터를 전달할 때 사용한다.

 

💡 주요 특징

  1. 읽기 전용 (분변성)
  2. 컴포넌트의 재사용성 증가
  3. 단방향 데이터 흐름 지원

 

💻 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. 1. React.js
  2. 2. JSX (JavaScript XML)
  3. 3. Props (Properties)
'에이콘아카데미 회고/5회차) 자바기반 풀스택 개발자 양성과정' 카테고리의 다른 글
  • React) 69번째 회고
  • React) 68번째 회고
  • Spring, Spring Boot) 66번째 회고
  • Spring, Spring Boot) 65번째 회고
유쨈미
유쨈미
박쨈미와의 일상 블로그 ૮ • ﻌ -ა 🤍
유쨈미
주인장 유쨈미
유쨈미
전체
오늘
어제
  • 분류 전체보기
    • 에이콘아카데미 회고
      • 5회차) 자바기반 풀스택 개발자 양성과정

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

최근 댓글

최근 글

hELLO· Designed By정상우.v4.5.2
유쨈미
React) 67번째 회고
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.