insu90 님의 블로그

리액트(React)는 상태(state)를 통해 컴포넌트의 동적인 동작을 가능하게 합니다. 상태는 일반 변수와 달리 변경 시 컴포넌트를 리렌더링하여 사용자 인터페이스(UI)에 즉각적으로 반영됩니다. 이 글에서는 상태의 정의, 클래스형 및 함수형 컴포넌트에서 상태를 관리하는 방법, 그리고 상태 관리 시 주의사항을 살펴보겠습니다. 1. 상태(state)란?상태는 컴포넌트 내부에서 읽고 업데이트할 수 있는 데이터입니다. 리액트는 상태가 변경될 때 컴포넌트를 자동으로 리렌더링합니다.⚠ 중요: 상태 변수는 일반 변수처럼 직접 수정할 수 없으며, 반드시 리액트가 제공하는 setState 메서드 또는 useState 훅을 사용해 업데이트해야 합니다.클래스형은 setState, 함수형은 useState가 반환하는 업데이..

React를 사용하여 간단한 신호등(Traffic Light) 컴포넌트를 만드는 방법을 소개합니다. 이 글에서는 여러 개의 컴포넌트를 만들고, 객체 배열을 활용하여 데이터를 출력하고, 동적인 스타일링을 적용하여 신호등의 색깔을 변경하는 기능까지 구현해보겠습니다. 1. 신호등 컴포넌트 만들기이제 신호등(Traffic Light) 컴포넌트를 만들어봅니다. 신호등은 빨간색, 초록색, 노란색 원을 출력하고, 각 원의 크기와 색상을 부모 컴포넌트로부터 전달받습니다.먼저 간단한 디자인부터 시작하겠습니다.function App() { return ( );}export default App;위와같이 나오는 것을 볼 수 있습니다. 이제 디자인은 되었으니 이를 컴포넌트를 ..

React는 UI를 구성하기 위한 컴포넌트 기반의 라이브러리입니다. 이번 포스팅에서는 클래스형 컴포넌트와 함수형 컴포넌트의 구조, props(properties)를 사용하는 방법, 그리고 props.children 활용법을 정리하였습니다. 1. 컴포넌트 구조React 컴포넌트는 크게 클래스형 컴포넌트와 함수형 컴포넌트로 나눌 수 있습니다.클래스형 컴포넌트React.Component를 상속받아 작성하며, 반드시 render 메서드가 필요합니다.import { Component } from 'react'; class MyApp extends Component { //리액트 컴포넌트를 상속받아 정의 render() { // 리액트 컴포넌트가 정의한 render 함수 재정의 return (..

JSX는 JavaScript XML의 약자로, 자바스크립트에 XML/HTML 문법을 결합하여 간결하고 직관적인 UI 코드를 작성할 수 있는 문법입니다. 리액트(React)에서 컴포넌트를 정의하거나 UI를 구성할 때 주로 사용됩니다. 이 글에서는 JSX의 특징과 규칙, 그리고 주요 활용법을 소개합니다. 1. JSX란?JSX는 JavaScript와 XML의 조합으로, HTML 요소를 JavaScript 코드 안에서 작성할 수 있습니다. const element = Hello, World!;//위 코드는 Babel을 통해 일반 JavaScript로 변환됩니다.const element = React.createElement("h1", {}, "Hello, World!"); JSX의 장점HTML과 JavaScri..

리액트(React)는 SPA(Single-Page Application) 개발을 손쉽게 도와주는 JavaScript 라이브러리입니다. UI를 컴포넌트 단위로 개발하며, 웹 애플리케이션뿐만 아니라 네이티브 앱 개발에도 사용됩니다.이 글에서는 SPA와 MPA의 차이, 리액트를 이용한 기본 앱 개발, 그리고 프로젝트 초기화를 도와주는 도구인 CRA(Create-React-App) 및 Next.js를 활용한 앱 제작 방법을 소개합니다.MPA와 SPA: 차이점 및 장단점 MPA (Multi-Page Application)특징MPA는 요청마다 새로운 HTML 페이지를 서버에서 로드하는 전통적인 웹 애플리케이션 방식입니다.장점SEO(검색엔진 최적화)에 유리초기 로딩 속도가 빠름기능이 독립적이고, 다양한 툴과 쉽게 연..

이 글에서는 Axios와 jQuery를 사용하여 REST API에서 데이터를 가져오고, 국가 이름과 국기 이미지를 웹 페이지에 출력하는 방법을 단계별로 설명합니다. 추가적으로 검색 기능을 구현하여 특정 국가만 필터링해 출력할 수도 있습니다.사전 준비1. JSON Formatter 크롬 확장 설치REST API 데이터를 보기 쉽게 포맷해주는 JSON Formatter 크롬 확장을 설치하세요.https://chromewebstore.google.com/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=ko&pli=12. REST API 활용REST API를 통해 국가별 정보 데이터를 가져옵니다.URL: https://restcountries.com/v3...

JavaScript에서 배열은 자주 사용되는 자료구조입니다. 이 배열을 처리하는 데 유용한 다양한 메서드들이 존재하는데, 그 중 map(), filter(), reduce() 메서드는 매우 중요한 역할을 합니다. 각 메서드는 배열을 변환하거나, 조건에 맞는 요소를 추출하거나, 배열을 하나의 값으로 축소하는 등의 작업을 손쉽게 할 수 있게 도와줍니다.이번 글에서는 map(), filter(), reduce() 메서드의 사용법과 예제를 살펴보겠습니다. 1. map() 메서드map() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새 배열을 생성합니다. 원본 배열을 변경하지 않고, 변환된 새로운 배열을 반환합니다.기본 구문const newArray = array.map((currentVa..

전개 연산자 (Spread Operator)전개 연자는 배열이나 객체의 요소들을 개별 항목으로 분리할 때 사용됩니다. 배열이나 객체를 펼쳐서 값을 복사하거나 결합하는 등의 작업을 간단하게 할 수 있습니다.1. 배열의 요소 펼치기배열에서 Math.max()처럼 인수로 배열을 직접 전달하면 제대로 동작하지 않지만, 전개 연자를 사용하면 배열 요소를 펼쳐서 전달할 수 있습니다.//이하는 전개 연자로 배열요소를 전달하는 방법입니다.const numbers = [20, 2, 9, 22];console.log(Math.max(...numbers)); // 22 //이하는 전개 연자 없이 apply로 배열 요소를 전달하는 방법입니다.const numbers = [20, 2, 9, 22];// apply() 메서드로..

1. 서버로부터 받은 문자열 데이터를 JSON으로 변환서버에서 받은 데이터는 보통 문자열 형식으로 전달됩니다. 이 문자열 데이터를 JSON 형식으로 변환하여 객체처럼 다루어야 할 때가 많습니다.let scores = [];// 서버로부터 받은 문자열 데이터 - 서버로 부터 받아온 데이터는 아래와 같은 형식입니다.const dataFromServer = ` [ { "name": "홍길동", "korean": 80, "math": 90, "english": 90 }, { "name": "고길동", "korean": 90, "math": 80, "english": 80 }, { "name": "신길동", "korean": 70, "math": 80, "english"..

지금까지 포스팅한 내용과 검색을 기반으로 작성하겠습니다. 문제는 아래와 같습니다. // 학생별 점수를 아래 형식에 맞춰서 콘솔에 출력 let scores = [];/* ### 학생별 점수 데이터 0: {name: '홍길동', korean: 80, math: 90, english: 90} 1: {name: '고길동', korean: 90, math: 80, english: 80} 2: {name: '신길동', korean: 70, math: 80, english: 70} ### 출력 형식 ----------- --------- --------- --------- --------- --------- 학생이름 국어 영어 수학 합계..