React : 컴포넌트(Component)

컴포넌트(Component)리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트(Component)' 라는 단위를 사용한다.컴포넌트는 리액트의 핵심 단위로, 독립적이고 재사용 가능한 UI 조각이다.즉, 리액트에서 애플리케이션을 이루는 가장 작은 조각이라고 할 수 있겠다.리액트에서는 이러한 작고 독립된 코드의 파편을들을 조합하여 복잡한 UI를 구축할 수 있다.리액트 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트 2가지로 나뉠 수 있으며,현재는 Hook의 등장으로 클래스형 컴포넌트보다 함수형 컴포넌트의 사용 빈도가 월등히 많다.✨ 하지만 하이테크한 로직이 있을 경우 클래스형 컴포넌트를 사용해주는 편이 더 좋아서 클래스형 컴포넌트를 잊어서는 안되겠다.컴포넌트의 구성 요소1. props- props는 부모 컴포넌..

• format_list_bulleted Front/React
• · 2024. 11. 24.
• textsms

React : props and state

propsprops(properties)란 컴포넌트가 외부에서 받는 데이터를 의미한다.즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다.props는 읽기 전용 데이터이므로 전달받은 자식 컴포넌트 내부에서 직접 수정할 수 없다. 자식 컴포넌트에서 전달받은 props는 변경이 불가능한 대신 props를 전달해준 부모 컴포넌트만 props를 변경하여 자식 컴포넌트가 변경된 데이터를 받게 된다.💡 props란?"props는 부모 - 자식 컴포넌트 간의 데이터를 전달하는데 사용되며, 상속받은 자식 컴포넌트 내부에서는 값이 변경 불가능한 readonly 데이터이다."props 예제App.js를 부모 컴포넌트라고 가정다른 컴포넌트(class type, function type)에 props로 데이..

• format_list_bulleted Front/React
• · 2024. 11. 24.
• textsms

241122 리액트 (총정리 문제)

241122 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다. 리액트리액트 마지막 예제는 jar로 aws에 올려보자!aws를 사용하려면 리눅스를 알아야한다.개발자의 OS는 윈도우가 아니다 리눅스를 꼭 알아야겠다.CORS 개념 잘 알아두기!요청에서부터 서버에서 데이터를 가져오는 과정을 설명할 수 있어야하겠다. 그림까지 그리면서 정리! 설명!최소 5분 설명이 가능해야할 것 같다. 네트워크, 소켓, 스레드, 도메인, 프로토콜 등등 많은 얘기가 나온다. 기존의 방법과 RESTful의 비교를 설명해보자!문제지금까지 배운 리액트 관련 수업 내용들을 총망라하여 문제를 풀어보자!정리하면서 풀어보는 것이 핵심!에러 결과

• format_list_bulleted Study/Acorn
• · 2024. 11. 22.
• textsms

241121 리액트 (리덕스 DB연동, RESTful)

241121 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다. 리액트 (Redux)리덕스의 풀은 굉장히 넓다. 어디가서 자랑하면 개망신 당할 가능성이 농후하다.항상 겸손하게 "리덕스 입문 했어요, 살짝 발만 담궜습니다" 말하기!리덕스 실습 (DB 연동)직원 이름 검색, 고객 검색jsp 사용해서 해보자!findjikwon.jsp 톰캣 서버, JSON 객체로 받아오는 것을 확인findgogek.jsp톰캣 서버, JSON 객체로 받아오는 것을 확인Redux 의존성 추가 : npm install @reduxjs/toolkit react-reduxstore.jsimport { configureStore } from "@reduxjs/toolkit";import rootReducer from "./reduce..

• format_list_bulleted Study/Acorn
• · 2024. 11. 21.
• textsms

241120 리액트 (Redux)

241120 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다.리액트 (Redux)오늘의 리덕스 이야기!출처 : 개발일지 S_Soo100 : [React-Redux] 개념부터 기본 사용법 까지 자식 컴포넌트내의 데이터를 자식 컴포넌트끼리 전송하면 안된다.부모 컴포넌트로 전송하고 하위 컴포넌트로 내려줘야 리액트에서 일관성이 보장된다.컴포넌트 수가 적다면 리덕스를 굳이 사용을 하지 않아도 크게 문제가 되지 않겠지만, 실제 프로젝트에서는 컴포넌트가 수없이 많기 때문에 이렇게 state값을 컴포넌트를 타고 넘기는 일들은 보통 힘든 일이 아닐 수 없다.그렇기 때문에 변수들을 담을 수 있는 창고(store)를 만들어 담아두면 좋겠다. 창고에 있는 변수들을 가져다 쓰면 부모 - 자식 컴포넌트 사이에서 데이터를 넘..

• format_list_bulleted Study/Acorn
• · 2024. 11. 20.
• textsms

241119 리액트 (Routing)

리액트 (Routing)라우팅 개발 환경 세팅외부 라이브러리 설치 (프로젝트별로 설치해야 함)npm install react-router-dom1. index.js에서 를 태그로 감싸주기import React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import { BrowserRouter } from 'react-router-dom';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( ..

• format_list_bulleted Study/Acorn
• · 2024. 11. 20.
• textsms

241118 리액트 (memo / life cycle / 컴포넌트 설계 / 문제)

241118 에이콘 아카데미 수업을 기반하여 작성되었음을 알립니다.리액트 (React.memo)React.memo를 통해 불필요한 렌더링을 방지해서 앱의 성능 끌어 올릴 수 있다. – 메모리 최적화React의 멋진 기능 중 하나는 Memoization을 중심으로 한 도구 세트이다.메모리 관리에 대한 이야기! 메모이징은 컴퓨터 프로그래밍에서 잘 알려진 개념으로, 비용이 많이 드는 함수 호출의 결과를 캐싱 하고 캐시된 결과를 재사용하여 비용이 많이 드는 작업을 반복하지 않고 프로그램 속도를 높이는 것을 목표로 한다.필요한 함수만 호출하여 메모리 관리에 집중하겠다는 말이다!! 리액트의 경우 필요한 부분만 리렌더링을 한다. 필요없는 부분은 리렌더링 하지말자는 뜻이다.React.memo() : React는 먼저 ..

• format_list_bulleted Study/Acorn
• · 2024. 11. 18.
• textsms

React : JSX(JavaScript XML)

JSX(JavaScript XML)이전 글에서 App.js 자바스크립트 파일 내에 코드를 변경하여 브라우저 화면(HTML)이 수정된 것을 확인할 수 있었다.원래 HTML의 변경은 .html 파일에 적어야 하지만 그런데 .js파일에 코드를 수정해도 HTML이 변경되는 이유가 뭘까?바로 App.js, return 내부의 코드들은 HTML코드가 아니기 때문이다. 바로 JSX 이다.JSX는 자바스크립트를 확장한 언어로 자바스크립트 파일 내에서 HTML코드를 사용할 수 있게 해준다.즉, 리액트는 JSX를 사용하여 HTML과 JavaScript를 결합한다.JSX는 HTML 코드와 비슷하기 때문에 일반 자바스크립트만 사용한 코드보다 더 익숙하고 간결하며 가독성이 좋다.추가로 JSX에서는 HTML 태그들과 똑같이 사용..

• format_list_bulleted Front/React
• · 2024. 11. 17.
• textsms

React : 개요 및 개발환경 세팅

리액트(React)리액트는 사용자 인터페이스(UI)를 구축하기 위해 페이스북(메타)에서 개발한 자바스크립트 라이브러리이다.기존 HTML에서 사용자들을 가장 신경쓰이게 하는 점은 페이지 이동이나 새로고침 같은 화면 깜박임이다. 그래서 싱글 페이지 애플리케이션(SPA) 구현이 웹 개발에 있어서 가장 중요한 부분 중 하나이다. 이러한 SPA 구현 뿐만 아니라 컴포넌트 사용으로 재사용성 향상, 데이터가 HTML에 바로 렌더링되어 자동 반영 기능을 가지고 있는 React, Angular, Svelte, Vue, Preact 와 같이 유사한 기능을 제공하는 라이브러리가 많지만 그 중 전세계적으로 리액트를 가장 많이 사용하는데 이 점이 리액트가 가지는 큰 장점이다.리액트의 사용 사례로 대규모 데이터 기반 애플리케이션..

• format_list_bulleted Front/React
• · 2024. 11. 17.
• textsms

241115 리액트 (useState / 문제)

241115 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다.리액트리액트 사용 시 클래스 사용법에 대해서 꼭 알아놔야한다.복잡하고 어려운 기능들은 클래스를 사용해야하기 때문에!타입스크립트를 써주는 것이 좋긴하지만 굳이 쓰지 않아도 괜찮다.우리의 리액트 수강 목표는 스프링에 붙여서 SPA를 만드는게 목적이기 때문이다.UX/UI에 기반하여 화면 구성을 해주는 것이 굉장히 중요하다!HOOK의 등장 전후로 많은 변화가 있었다. HOOK에 대해 설명할 수 있어야 한다.아파치 스파크! 자바 기반 데이터 분석! 보통 스칼라로 함!사람들은 보통 클릭함! 더블클릭, 드래그앤드롭에 익숙하지 않음더블클릭, 드래그앤드롭을 사용했을 시 안내가 필요함, 프로그램을 개발하고 제3자에게 아무말도 없이 보여주는 것이 좋음 일반 ..

• format_list_bulleted Study/Acorn
• · 2024. 11. 15.
• textsms