[ReactJS] 6장 폼

1. 폼 컴포넌트 생성리액트에서 폼을 처리하는 방법으로 사용자 이름과 이메일을 입력받는 폼을 만들고 그 안에 상태 관리와 이벤트 처리를 통한 입력값을 처리하는 방법을 알아보겠습니다. src 안에 Form.js 파일을 생성해 아래 코드를 작성합니다.import React, { useState } from 'react';export const Form = () => { // 상태 관리 const [formData, setFormData] = useState({ username: '', email: '', }); // 입력값 변경 핸들러 const handleChange = (e) => { const { name, value } = e.target; setFormData({ ..

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

[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