[ReactJS] 5장 리스트와 키

1.List (리스트)React의 List(리스트)는 배열 데이터를 기반으로 여러 개의 요소를 렌더링 할 때 사용됩니다. React에서 리스트를 생성할 때에는 보통 map 메서드를 사용해 배열의 각 요소를 React 컴포넌트로 변환할 때 사용합니다.import React from 'react';function List() { const list = ['딸기', '사과', '바나나']; return ( {list.map((list) => ( {list} ))} );}export default List; 위 예시 코드는 list에 과일을 각각 태그로 변환해 리스트를 생성하는 코드로, 이와 같이 데이터를 동적으로 렌더링할 수 있습니다. 리스트로 이미지 URL..

• format_list_bulleted Front-End/ReactJS
• · 2025. 2. 23.
• textsms

[React] 4강 조건부 렌더링

1. if 문 사용가장 기본적인 방법으로 if문이 있습니다. if문은 조건에 따라 렌더링할 내용을 결정합니다.import React from 'react';class MyComponent extends React.Component { render() { const isLoggedIn = true; // 또는 false로 설정 if (isLoggedIn) { return 환영합니다!; } else { return 로그인 해주세요.; } }}export default MyComponent;2. 삼항 연산자삼항 연산자를 사용하면 코드를 더욱 간결하게 작성할 수 있습니다.import React from 'react';const Trinomial = () => { co..

• format_list_bulleted Front-End/ReactJS
• · 2025. 2. 22.
• textsms

[React] 3장 이벤트 처리

1. 컴포넌트 파일 생성src 폴더 내 Event.js라는 파일을 생성해줍니다.src/└─2.Event└─-- index.js index.js에 클릭 이벤트 핸들러를 작성해주고 버튼을 클릭시 클릭한 수만큼 +1하는 코드를 작성해보겠습니다.import React, { useState } from 'react'function Event() { const [count,setCount] = useState(0); // 클릭 이벤트 처리 const handleClick = () => { setCount(count + 1); } return ( 클릭 수: {count} 증가 )}export default Event;useState 훅을 ..

• format_list_bulleted Front-End/ReactJS
• · 2025. 2. 22.
• textsms

[ReactJS] 2장 컴포넌트와 UI 구성요소

1. UI 구성 요소React의 컴포넌트는 주로 다음과 같은 UI 형식로 구성되어 있습니다.HTML 요소: , , 등 일반적인 html 요소 React 요소: 다른 React 컴포넌트를 포함시킬 수 있음스타일 요소: CSS 또는 스타일링 라이브러리를 사용해 UI를 꾸밀 수 있음2. 컴포넌트 정의하기컴포넌트를 정의하기위해 함수형 컴포넌트 또는 클래스형 컴포넌트로 정의할 수 있습니다. 함수형 컴포넌트 예시import "./App.css";import React from "react";const ReactComponent = () => { return hello React!;};export default ReactComponent; 클래스형 컴포넌트 예시import React, { Component } fr..

• format_list_bulleted Front-End/ReactJS
• · 2025. 2. 16.
• textsms

[ReactJS] 1장. React JS는 무엇인가?

2013년 5월 29일 지금으로부터 약 12년전 페이스북(Meta) 및 공동체가 개발한 싱글 페이지 애플리케이션인 React가 탄생하게 됩니다. React는 "싱글 페이지 애플리케이션(SPA, Single Page Application)"과 동적 웹 애플리케이션"개발에 사용할 수 있고 컴포넌트 기반 아키텍쳐 와 가상 DOM(Virtual DOM)을 제공합니다.1. React의 주요 특징컴포넌트 기반 아키텍쳐React UI를 컴포넌트(Component) 단위로 나누어 개발각 컴포넌트는 독립적이며 재사용이 가능가상 DOM(Virtual DOM)React는 실제 DOM 대신 가상적인 DOM을 사용해 성능을 최적화상태가 변경되는 즉시 가상DOM을 먼저 업데이트 후, 변경된 부분만 실제 DOM에 반영선언적 UI(..

• format_list_bulleted Front-End/ReactJS
• · 2025. 2. 13.
• textsms