본문 바로가기

react38

[React] return 내에서 if문이 아닌 삼항연산자를 사용하는 이유 코드를 공부하다가간단하게 나타낼 수 있는 조건의 경우주로 삼항연산자를 사용하는 걸 알게됐다.왜 if문이 아닌 삼항연산자를 사용하는걸까? 1. 삼항연산자return ( {isLogin ? 환영합니다! : 로그인하세요.} );isLogin이 true이면 "환영합니다"가 보이고, false이면 "로그인하세요."가 보이도록 하는 것. 이런 방식으로 쓰는 걸 삼항연산자라고 한다. 코드를 찾아보면 return에 삼항연산자가 쓰인다. if문은 return 내에서 보지 못했다. 주로 익숙한 것은 if문이라서 굳이 왜 삼항연산자를 쓰는걸까? 의문이 생겼다. 2. 이유- if문 -const CustomerTable = () => { let message; if (isLogin) { m.. 2026. 1. 30.

[React] Spring으로 POST 보내는 두가지 방법_ then 방식과 async 방식 프로젝트를 하는 내내then 방식으로 Spring에 요청을 보냈다.그러다 다른 기능을 만들면서 코드를 찾아보니 async 방식으로 보내는 방법을 알게됐다.두방법의 차이가 뭘까? 1. 상황설명 고객 정보를 저장하려 한다. 고객 정보는 body에 넣어 POST 방식으로 Spring에 보내질 것이다. 그러면 Spring은 React의 요청을 받아 처리할 것이다. 이때 조건이 있다. 고객 정보에 들어가는 초대 코드 번호가 중복되어선 안되는 것이다. 만약 초대 코드가 중복일 경우 Spring에서 React로 409를 보낼 것이다. React는 409를 Spring으로부터 받으면 "초대코드가 중복되었습니다. 다른 코드를 입력해주세요." 문구가 사용자 화면에 alert 될 것이다. POST 방식으로 보낸다.상태 .. 2026. 1. 29.

Spring이 작동하고 있지 않는데, 기능이 제대로 수행되는 경우_ 서버 확인하기 기능이 제대로 되길래아주 행복해하고 있었다.그런데 백엔드를 확인해보니,에러가 발생해서 꺼진 상태였다.어떻게 기능이 수행된 것일까? 1. 상황 수정과 삭제 기능을 만들었다. 그리고 Service를 넣어 로직을 분리해줬다. 대대적인 공사가 끝나고 자잘한 오류를 고치고 나니 제대로 기능이 수행되었다. F12를 눌러 네트워크 등 오류 발생이 있는지 확인했는데, 그것도 없었다. 그렇게 행복해하던 와중 백엔드 서버가 제대로 실행되고 있지 않다는 걸 발견했다. 내가 만든 기능은 수정과 삭제 버튼을 누르면 백엔드로 넘어가 거기서 처리되도록 되어있다. 프론트에서 처리하도록 만든 적이 없고 능력도 없는데, 어떻게 이게 가능한걸까? (사실 내게 대단한 재능이 있는게 아닌가 생각했다. 이게 왜.. 되지?) 2... 2026. 1. 21.

[React] useReducer로 정보 추가, 수정, 삭제 기능 만들어보자. 리액트에서 제공하는 설명을 보면useReducer를 이용하여정보 삭제와 수정 기능을 만든 예제를 볼 수 있다.어떻게 만든건지 알아보자!1. useReduceruseReducer는 컴포넌트의 최상위에 호출하고 reducer를 이용해 state를 관리한다.상태를 바꾸는 규칙(로직)을 한곳에 모아두고 이벤트(액션)가 오면 그 규칙대로 상태를 업데이트한다.useState는 상태를 하나만 바꿀 때 쓰기 좋다면, useReducer은 상태가 복잡해질 때 사용하기 좋다. 2. useReducer를 이용한 정보 추가와 수정, 삭제 기능 예제 [과정]Add 혹은 Edit 혹은 Delete 이벤트가 발생dispatch(action) 호출Reducer 실행State 업데이트 const [tasks, dispat.. 2026. 1. 14.

[React] ContextHook(useContext) 정의와 사용예시 리액트의 클래스형 컴포넌트에 대해 알아보았다.그러면서 자연스레 Hook에 대해 알게되었고,React 코드의 대부분은 Hook으로 이뤄진 걸 알게되었다.Hook이 무엇인지, 자세하게 알아보자. 1. React Hook의 등장 배경리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다.리액트 초기에는 함수형 컴포넌트를 사용했으나, 값의 상태를 관리(state) 혹은 생명주기(컴포넌트가 생성되고 사라지는 과정)를 사용해야할 때만 클래스형 컴포넌트를 사용했다.클래스형 컴포넌트는 코드의 구성이 어렵고 재사용성이 떨어진다. 코드 최적화도 어렵고 최신 기술 사용도 효과적이지 않다.그래서 이런 클래스형 컴포넌트의 단점을 보안하면서, 함수형 컴포넌트를 사용할 수 있도록 등장한 것이 바로 React Hook(.. 2026. 1. 12.

[React] StateHook(useState, useReducer) 정의와 사용예시 리액트의 클래스형 컴포넌트에 대해 알아보았다.그러면서 자연스레 Hook에 대해 알게되었고,React 코드의 대부분은 Hook으로 이뤄진 걸 알게되었다.Hook이 무엇인지, 자세하게 알아보자. 1. React Hook의 등장 배경리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다.리액트 초기에는 함수형 컴포넌트를 사용했으나, 값의 상태를 관리(state) 혹은 생명주기(컴포넌트가 생성되고 사라지는 과정)를 사용해야할 때만 클래스형 컴포넌트를 사용했다.클래스형 컴포넌트는 코드의 구성이 어렵고 재사용성이 떨어진다. 코드 최적화도 어렵고 최신 기술 사용도 효과적이지 않다.그래서 이런 클래스형 컴포넌트의 단점을 보안하면서, 함수형 컴포넌트를 사용할 수 있도록 등장한 것이 바로 React Hook(.. 2026. 1. 12.

이전 1 2 3 4 5 6 7 다음

티스토리툴바