✨ Front-end/리액트(React)15 [Spring-Boot , React] 스프링부트와 React 연동하기 0. Redux DevTools 구글에 Redux DevTools를 치고 Crome에 추가시켜준다. https://start.spring.io/ 먼저 위 사이트에서 스프링 프로젝트를 하나 생성해서 SpringBoot로 Gradle해왔다. 1. 프론트에서 React설치하기 npx create-react-app fronted 비주얼스튜디오에서 React를 설치한다. fronted 해당 폴더에서 npm start로 해서 리액트가 실행되면 리액트 실행까지 완성이다. 2. Proxy 설정하기. ( CORS 관련 오류 방지를 위해 proxy를 설정 ) npm install http-proxy-middleware --save CORS (Cross Origin Resource Sharing) 서버와 클라이언트가 동일한.. 2023. 9. 26. [React] 에러 react-scripts 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다. 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 오류가 떴을 때, npm update 수행 이후 npm start를 다시 해보면, 정상적으로 실행 된다. 2023. 9. 26. [React] Redux 사용 (store, actions, reducers, dispatch) Redux란? Redux는 JavaScript 애플리케이션의 상태 관리 라이브러리로서, 애플리케이션의 상태를 효율적으로 관리하고 상태 변화를 예측 가능하게 만든다. Redux를 사용하면 애플리케이션의 상태를 하나의 전역 객체인 "스토어 (store)"에 저장하고, 이를 관리하며 갱신할 수 있다. Redux의 핵심 구성 요소 4가지 Store (스토어): Redux 스토어는 애플리케이션의 상태를 담고 있는 객체다. 모든 상태는 스토어에 집중적으로 관리된다. Actions (액션): 액션은 애플리케이션에서 스토어로 데이터를 전달하는 객체다. 액션은 어떤 변화가 일어나야 하는지 설명하며, 스토어에서 이를 기반으로 상태를 변경한다. Reducers (리듀서): 리듀서는 액션에 따라 상태를 어떻게 변경할지를 정의.. 2023. 9. 25. [React] Redux 개념과 동작원리 Redux Redux는 리액트 없이도 사용할 수 있는 상태관리(state management) JavaScript 라이브러리이다. 애플리케이션의 많은 부분에 필요한 "전역" 상태를 관리하는 데 도움이 된다. 왜 필요함? 상태관리가 왜필요할까? 하나의 컴포넌트가 사용하는 데이터 역할을 상태라고 본다. state 는 자주 변하고 상황에 따라 최상위 루트까지 접근을 해야하는데, 매번 props로 계속 내려주는 비효율적인 일을 생략하고, 최단거리로 사용할 수 있다. 그래서 예측이 가능하고, 예상대로 작동할 것이라는 확신을 갖도록 도와주기 때문이다. react에서는 상태와 속성(props)을 이용한 컴포넌트 단위 개발 아키텍처를 배웠다면, Redux에서는 컴포넌트와 상태를 분리하는 패턴을 배운다. Redux의 구.. 2023. 9. 25. [React] Router -2 Nested(중첩) Router 및 Param, Navigate Nested Router 태그 안에는 태그가 존재할 수 있다. 이 경우 내의 페이지 안에 하위 경로를 설정해 지정할 수 있는데, 이것을 Nested Router라고 한다. App.js 내에 를 표시하고 싶을 경우 이라는 태그를 사용해 활성화 시킬 수 있다. IndexPage.js home이나 hello 경로로 들어갔을 때 , App.js에서 분명 IndexPage 말고도 아래에 Route가 두개 더 있어서 떠야하는데 안뜬다. 이 없어서 그렇다. Outlet을 추가해야 중첩 Router를 사용할 수 있어 위와 같이 아래에 있던 도 추가 된 것을 볼 수 있다. ReactRouterHooks React Router에는 여러 hook들을 제공하는데, 그 중 3가지 useParams - URL 파라미터 정보를 가.. 2023. 9. 22. [React] Router -1 세팅 및 style 적용 방법 Link, NavLink Router란? 라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다. 다양한 주소의 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜 주는 작업이라고 볼 수 있다. npm install react-router-dom router를 쓰기 위해선 설치해줘야 할 코드가 위에 있다. 이후 npm start를 통해 페이지를 띄우자. BrowserRouter.js HTML 삽입 미리보기할 수 없는 소스 위 js파일을 하나 만들어주고, component > Hello.js, Home.js component 폴더를 만든 후 그 경로 안에다가 Hello와 Home js를 만들어 content 부분을 넣어준다. App.js react-router-dom에서 BrowserRouter, Route, Routes.. 2023. 9. 22. [React] useReducer 사용 예제, useState와의 차이점 useReducer란? 복잡한 상태 관리를 간편하게 처리하기 위해 사용되는 함수이다. useReducer를 사용하면 컴포넌트의 상태를 관리하고 상태를 변경하는 로직을 더 구조적으로 작성할 수 있다. const [state, dispatch] = useReducer(reducer, initialState); state: 현재 상태를 나타내는 값 dispatch: 상태를 변경할 때 사용하는 함수 reducer: 상태를 변경하는 로직이 담긴 함수 initialState: 초기 상태를 설정하는 값 useReducer는 보통 컴포넌트에서 사용할 상태 관리 로직을 별도의 함수인 reducer에서 처리하도록 하는데, 이러한 방식은 상태 관리 로직을 컴포넌트 밖에 둠으로써 코드의 재사용성과 유지보수성을 높인다. use.. 2023. 9. 22. [React] useEffect의 개념 및 실행 시점의 차이 및 사용예제 useEffect란? 함수형 컴포넌트에서 side effect를 수행하고, 컴포넌트의 생명주기에 특정 작업을 연결하는 Hook이다. 이는 컴포넌트가 렌더링될 때, 업데이트될 때, 혹은 제거될 때 특정 작업을 수행하게 해준다. ex1) 사용예제 HTML 삽입 미리보기할 수 없는 소스 결과화면 첫 번째 렌더링 시에 "컴포넌트 생성"이 찍히는 것은 useEffect의 첫 번째 실행이다. 해당 useEffect는 컴포넌트가 마운트될 때 실행된다. 두 번째로 "컴포넌트 사라짐"이 찍히는 것은 컴포넌트가 다시 렌더링되어 언마운트되었을 때의 작업이다. 이전에 생성된 컴포넌트 인스턴스가 제거되고, 새로운 컴포넌트 인스턴스가 생성되어 언마운트 작업이 실행된다. 마지막으로 "컴포넌트 생성"이 다시 찍히는 것은 두 번째 렌.. 2023. 9. 21. [React] useRef의 개념과 2가지 사용법 useRef란? React에서 사용되는 Hook 중 하나로, 함수형 컴포넌트에서 변수를 저장하고 관리하는 데 사용된다. useRef를 사용하면 함수형 컴포넌트 내에서도 값이 유지되며, 이전 값에 접근할 수 있다. 일반적으로 useRef는 DOM 요소에 대한 참조를 생성할 때 사용된다. 그러나 useRef는 단순히 DOM 참조가 아니라, 컴포넌트 전체에서 유지하고 싶은 어떤 값에도 사용할 수 있다. useRef는 .current 속성을 사용하여 값에 접근하거나 값을 변경할 수 있다. .current를 통해 접근된 값은 컴포넌트가 리렌더링되어도 변경되지 않는다. React에서 useRef는 크게 두가지 용도로 활용된다. 렌더링 시 초기화 되지 않고 유지되는 조작 가능한 변수 값을 선언할 경우 일반 JavaS.. 2023. 9. 21. [React] CSS 적용방법 (inline, CSS 파일, 모듈형 CSS 파일) 3가지 CSS를 적용하는 방법 3가지 인라인 (inline) styling 적용 Css styling 작성 후 Component에서 css파일 import css-module 사용 1. 인라인 styling (1) return문 안에서 인라인 스타일을 지정하여 css를 적용시켜준 예이다. 인라인 styling (2) 2. CSS 활용 ' ' 홀 따옴표 대신해서 " " 쌍 따옴표를 사용해도 정상적으로 작동된다. 인라인 Styling의 장점 CSS파일을 작성할 필요가 없다. 자바 스크립트 로직을 css파일에 먹일 수 있다. 단점 인라인 스타일로 작성하다 보니 태그에 스타일이 남으며 가독성이 떨어지고, 유동적인 조작이 힘들다. CSS파일의 장점 CSS의 개발 형식을 그대로 사용이 가능하다. 단점 파일 재사용 시 js.. 2023. 9. 21. [React] Prop 프로퍼티 사용하기 Prop 이란? properties의 줄임말로, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. (단방향 데이터 흐름) 프로퍼티는 수정할 수 없다는 특징이 있다. 자식입장에선 읽기 전용인 데이터이다. 프로퍼티에 문자열을 전달할 때는 큰따옴표 (" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용한다. Ex1) 기본적인 Prop src 아래에 component 폴더를 만들어 Comp1.js를 생성후 함수를 만들었다. 이 컴포넌트는 val1이라는 속성(props)을 받아서 해당 속성을 사용하여 "Hello {val1}"을 렌더링한다. 이후 export default Comp1로 외부에서도 사용할 수 있게 만들어 Comp1 컴포넌트를 내보낸다. 기본적인 Prop이 실행된 것을 볼 수 있.. 2023. 9. 20. [React] 조건문과 반복문(map) , toggle 사용하기 조건문(삼항연산자) React는 JSX를 쓰기 때문에, JSX 문법을 사용해서 html과 js를 혼합해서 사용한다. JSX 내부의 자바스크립트 표현식에선 if문을 사용할 수 없다. 따라서 삼항연산자를 사용하게된다. 삼항연산자 조건식 ? 참 : 거짓 HTML 삽입 미리보기할 수 없는 소스 react 안에 있는 html 문법에서 if() 를 쓸 수는 없으므로, { } 안에 삼항연산자를 이용해 해당 기능을 대신 처리한다. 위 코드에서 useState를 사용해 모달 기능을 구현한 예시가 있다. 모달을 클릭하면 컴포넌트 예제 모달창이 나타났다 사라졌다 할 수 있게된다. 반복문(map) HTML 삽입 미리보기할 수 없는 소스 위와 같이 반복문 또한 { } 태그 안에 map을 사용해서 나타낼 수 있다. [1,2,3].. 2023. 8. 6. 이전 1 2 다음
