name https://images.velog.io/tags/React.png

# React

리액트(React)는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.

38980개의 포스트

[React] 컴포넌트

컴포넌트 리액트 앱을 구성하는 최소한의 단위 클래스 컴포넌트 함수 컴포넌트 컴포넌트의 장점 재사용성: 독립적, 모듈화된 단위 가독성과 유지보수성: UI구조의 명확한 파악 가능, 개별 컴포넌트 수정이 가능 효율적 업데이트: 가상 DOM, 필요한 부분만 다시 렌더링 함수형 컴포넌트 예시 export default를 통해 HelloWorld 컴포넌트를 다른 컴포넌트에서 사용가능하도록 내보냄 App 컴포넌트에서 HelloWorld 컴포넌트를 사용하는 예시 App 컴포넌트에서 HelloWorld 컴포넌트를 개별 렌더링

약 2시간 전
·
0개의 댓글
·
post-thumbnail

React - React Query(TanStack Query)

React Query React Query는 웹 애플리케이션에서 서버 데이터를 효율적으로 가져오고, 캐싱하며 동기화하는 데 도움을 주는 라이브러리다. 이 라이브러리의 도움으로 개발자는 서버와의 데이터 동기화, 데이터 리프레시, 오류 처리 등의 복잡한 작업을 훨씬 간결하게 처리할 수 있다. React Query의 장점 자동 데이터 리프레시 : 사용자에게 항상 최신의 데이터를 제공한다. 백그라운드 데이터 동기화 : 애플리케이션이 백그라운드에서도 데이터를 동기화한다. 오류 처리 : API 호출에서 오류가 발생하면 error 및 isError 상태를 통해 쉽게 처리할 수 있다. 캐싱 : 데이터를 자동으로 캐시하여 반복적인 요청을 피하고 성능을 향상시킨다. 기존 fetch 방식 전통적인 데이터 가져오기 방법은 useState와 useEffect를 사용하여 데이터 상태를 관리하고 API 호출을 수행한다. React Q

약 2시간 전
·
0개의 댓글
·
post-thumbnail

[리액트 공식문서 읽기] MANAGING STATE - Choosing the State Structure

Overview 상태를 잘 구조화하면 수정하고 디버그하기 좋은 컴포넌트와 지속적인 버그 소스가 되는 컴포넌트 사이에 차이가 생길 수 있다. 다음은 상태를 구조화할 때 고려해야할 몇 가지 팁이다. Principles for structuring state 일부 상태를 보유하는 컴포넌트를 작성할 때 사용할 상태 변수 수와 해당 데이터의 모양을 선택해야한다. 최적이 아닌 상태 구조에서도 올바른 프로그램을 작성하는 것이 가능하지만 더 나은 선택을 할 수 있도록 안내할 수 있는 몇 가지 원칙이 있다. 상태를 그룹화 해라. 항상 두 개 이상의 상태 변수를 동시에 업데이트 하는 경우 이를 단일 상태 변수로 병합하는 것을 고려해라. 상태의 모순을 피해라. 여러 상태가 서로 모순되고 “동의하지 않

약 6시간 전
·
0개의 댓글
·
post-thumbnail

[React] 동적으로 컴포넌트 스타일링: styled-components, CSS 모듈, 인라인 스타일, 동적 클래스

사용자 인터페이스 측면에서 상태에 따라 컴포넌트의 색상 등을 다르게 설정하는 것이 좋다. 그 예시로 Form 이라는 컴포넌트를 만들어서 상태에 따라 동적으로 컴포넌트를 스타일링 하는 방법을 알아보자. 기본적인 JSX는 다음과 같이 설정하였다. 이제 검색 버튼을 누르면 입력 값을 부모 요소로 전송하는 기능을 추가해보자. 다음과 같이 구현할 수 있다. 유저 입력 값을 state로 만든다. 입력 값이 달라질 때마다 state를 업데이트 한다. 검색 버튼을 누르면 state 값을 부모 요소로 전송한다. 마지막으로 동적 컴포넌트 스타일링을 위해 유저의 입력 값이 유효한지 확인하는 state를 추가하고 핸들러에 해당 로직을 추가한다. 스타일 지정 전 전체 코드 (Form.js) 이제 동적으로 컴포넌트 스타일을 변경해보자. (1) 인라인 스타일 가장 간단하게

약 8시간 전
·
0개의 댓글
·

[React] React-router-dom

패스트캠퍼스 고성능 대규모 프론트엔드 10개 프로젝트: 최적화부터 유지보수까지 한 번에 끝내는 초격차 패키지를 수강하고 정리한 내용입니다. Routing 라우팅: 사용자의 요청에 따라 적절한 컴포넌트를 랜더링하는 것 즉, 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 이러한 라우팅을 구현하기 쉽도록 하는 것이 react-router-dom > - React-router-dom: React앱의 라우팅 처리를 위한 라이브러리 React의 react-router 라이브러리 기반으로 만들어짐 React-router-dom: React앱의 라우팅 처리를 위한 라이브러리 React Router는 새로운 페이지를 로드하지 않기 때문에 불필요한 렌더링을 막을 수 있음. npm 또는 yarn을 통해 간단한 설치가 가능 실제 사용

약 17시간 전
·
0개의 댓글
·
post-thumbnail

[Spring][React] Spring Security를 통한 로그인 + 회원가입 구현 -2(BE)

[완료된 포스트입니다.] 오늘은 저번 회원가입 파트의 FE 부분에 이어서 BE인 spring을 만들어보겠습니다!! 먼저 FE에서 보내줄 정보를 받을 DTO 객체를 만들어줍니다. UserCreateDto.java 다음 회원가입의 엔드포인트를 맡을 controller를 추가해줍니다. UserController.java UserCreateDto를 받아서 userService의 createUser에 넘겨줍니다 리턴값으로 회원가입에 성공하면 username을 리턴받아 반환합니다. UserService.java > createUser 함수에서는 DTO를 받아 repository에서 요청한 메일로 가입된 user가 있는지 체크합니다. > 만약 기존에 있는 유저라면 에러를 반환하고 신규 유저라면 password를 인코딩하여 새롭게 등록합니다. 또한 테스트 코드 작성을 습관화 하기 위해 작

약 19시간 전
·
0개의 댓글
·
post-thumbnail

중복되지 않는 tab button 만들기

구현하고자 하는 기능 tab 버튼 3개 처음 랜더링이 됐을 때 관광명소 tab이 클릭되 것 처럼 보이게 하기 단일 선택만 가능(중복 선택x) tab button 코드 살펴보기 onclick을 했을 때 setActiveTab(index) 실행 = 내가 클릭한 item의 index 값이 activeTab에 저장된다. 내가 클릭한 item의 index 즉 activeTab이 map으로 반복되는 item의 index와 같으면 true가 되어 PlaceBtn.tsx로 전달 처음 화면이 랜더링 되고 보이는 tap은 activeTab의 default 값이 0이므로 categories의 첫번째 요소(관광명소)가 클릭된 것처럼 (그림자가) 보인다. active가 true 일때 cla

약 20시간 전
·
0개의 댓글
·

React 기초 : 영화사이트 [6]

Props 지난 번 작성했던 소스코드에서 우리는 최상위 컴포넌트인 App 안에 다른 컴포넌트를 집어 넣었다. 말 그대로 HTML을 캡슐화한 듯한 효과를 준 것이다. 그러나 그 자식 컴포넌트들은 App으로부터 어떠한 데이터를 받거나 할 필요는 없이, 독립적으로 존재하였다. 이러한 관점에서 시작하여 이제는 Prop에 대해 배워볼 것이다. > Props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보내는 어떠한 방식이다. Props 구현 우리가 회사에서 앱을 만들고 있다고 생각해보자. 다양한 버튼을 갖고 있을 것이다. 변경 사항 저장, 로그인, 확인, 취소 등등. 대부분의 회사들은 이 버튼의 디자인은 완전히 동일하다. 그리고 우리는 기능이 다른 리액트 컴포넌트를 재사용 해야한다. 그러나 여기까지 배운 지식만으로는 우리는 리액트 컴포넌트를 재사용할 수가 없다. 그래서 우리는 각각의 버튼마다 컴포넌트를 생성했다. ![](https://velog.vel

약 21시간 전
·
0개의 댓글
·
post-thumbnail

[포스코x코딩온] 웹개발자 풀스택 과정 12주차 | State, Hook, LifeCycle

state와 setState 📌 state란? 리액트에서 이벤트에 의해 변경되는 동적인 값 버튼을 클릭하는 onClick 이벤트, input 입력으로 인해 발생하는 onChange 이벤트에 의해 입력값이 변경된 경우 사용된다. props는 부모 컴포넌트가 설정하는 값이며 읽기전용이지만 state는 하위 컴포넌트도 데이터를 변경할 수 있다. setState 메서드를 사용하여 상태를 변경할 수 있다. ❓ 왜 사용할까? state의 값이 변경될 때 자동으로 재랜더링이 되기 때문에 변수 대신에 사용한다. 🤼‍♂ state vs props props : 부모 컴포넌트에서 자식 컴포넌트에 데이터 전달 시 사용(읽기모드) React는 단방향 데이터 흐름 state : 특정 컴포넌트가 갖는 상태(값) 컴포넌트 내부에서 선언되고 내부에서 값을 변경함 ||state|Props| |-|-|-| |유스케이스|뷰에 렌더링돼야 하는 컴포넌트의 데이

약 22시간 전
·
0개의 댓글
·
post-thumbnail

Option API에서 Composition API로의 전환

Vue에서의 로직 관리  vue.js에서는 vue를 구성요소를 구축하는 방식이 필요했습니다. 이러한 구성 요소의 구성은 React는 useState를 이용한 상태관리, useEffect를 이용한 컴포넌트의 생명주기를 예를 들 수 있습니다. 이러한 함수형 컴포넌트 구성 이전에는 class기반을 한 생명주기 메서드들을 사용하여 관리되곤 하였습니다.  Vue에서도 이러한 생명주기 메서드들을 포함하여 상태관리 데이터 바인딩에 대한 솔루션을 제공하고 있습니다. 바로 Option API와 Composition API가 그 예시라고 볼 수 있습니다. Option API / Composition API  기존의 Vue2까지는 전통적인 방식의 Option API방식으로 구성 요소를 구축하였습니다. 그러나 Vue3 출시 이후 Composition API 출시 후 개발자들 간에 뜨거운 주제로 떠올랐습니다. Composition API를 사

약 22시간 전
·
0개의 댓글
·
post-thumbnail

[TIL/React] 2023/09/22

1. QnA Page 경로 지정 🟢 > 2. QnA Page 셋팅 🟢 > 3. QnA List 셋팅 🟢 > 4. QnA List Detail 셋팅 🟢 > 5. 현재 모습 🟢

약 23시간 전
·
0개의 댓글
·
post-thumbnail

[React][Chakra UI] 분명 데이터가 넘어오는데, 자꾸만 내 data가 undefined 라거나, map 이 not a function 이라거나 할 때 써볼 방법

현재 상태: 백엔드 패치 후, 분명 data는 성공적으로 들어오고 있는데, 자꾸만 data가 undefined 라거나, map 이 not a function 이라는 오류가 뜨는 것이다. 신기한 것은 새로고침하거나 주소창에 주소를 직접 쳐서 들어가면 오류가 안 뜨고 백엔드가 제대로 들어오는데, 링크버튼을 눌러 들어가면 오류창이 뜬다는 것. 그래서 처음엔 링크나 컴포넌트의 오류인가? 싶어 해당 문서만 주구장창 찾아봤었다. 그러다 도통 답이 안 나와 노마드 슬랙에 물어보았고, 해당 슬랙 유저분께서 도움을 주셔서 문제를 해결할 수 있었다!(감사합니다!) 문제 해결: 해당 문제는 현재 백엔드가 패치된 홈 & 사진 카테고리 에서 발생하고 있었는데 각각 다른 오류가 나 둘 다 설명해보겠다. 1. 홈 화면 에러 (문제 발생 코드) ![](https://velog.velcdn.com/images/hanihoneykim/post/8213d921-2775-4f03-a

약 23시간 전
·
0개의 댓글
·
post-thumbnail

[React][chakra ui] 딕셔너리 속 배열에 .map() 적용하기 (data.map is not a function)

목표: 딕셔너리 속 배열 상태인 data에서 배열 꺼내 .map()적용하기 현재 상태: home에 photos, videos, texts 가 최근 생성순 기준 7개까지 보여지게 되어있음. 백엔드는 완료한 상태이고, 프론트엔드에 각각의 항목을 꺼내 패치를 하면 됨. 문제 발생: 문제는 현재 data의 형식이 {photos:[...], videos:[...], texts:[...]} 와 같이 딕셔너리 속에 배열이 있다는 것임. 때문에 {data?.map(....)}의 형식으로 패치가 안됨(data가 array가 아니기 때문) data?.photos.map(...)처럼 시도해 보았으나 data.map is not a function 라거나 _ 'IHome[]' 형식에 'photos' 가 없습니다_ 의 오류가 반복됨. 문제를 해결하기 위한 여러 방법: 1) console.log(data)로 데이터가 잘 들어오는지 확인한다. 2) console

약 23시간 전
·
0개의 댓글
·
post-thumbnail

react-device-detect를 사용 기기별 화면을 만들어보자!

react-device-detect 사용자 사용 환경 추적 라이브러리 React 라이브러리 중 react-device-detect라는 말그대로 사용자의 사용환경을 추적할 수 있어, 보다 기기별 화면을 효과적으로 보여줄 수 있는 라이브러리가 있다! 이 라이브러리는 크롬, 사파리, 익스플로러와 같이 특정 브라우저에서 다른 화면을 보여주려고 할 때 효과적이지만, 반응형 화면을 구성하고싶을 때에는 추천하지 않는다! 반응형 화면은 CSS @media 쿼리나 matchMedia, react-responsive, @react-hook/media-query를 사용해야 더 효과적이다. 🛠️기능 여기서 추적되는 기기는 생각보다 다양한데,,🤔 모바일, 태블릿, 데스크탑, 스마트 티비, 웨어러블 디바이스 등 기기도 추적이 가능하지만 안드로이드, IOS, 크롬, 파이어폭스, 사파리 등 웹 브라우저 또한 추적이 가능하다! 버전 추적도 가능한데, 윈도우 7,

어제
·
0개의 댓글
·

[React] 컴포넌트 하나로 수정, 추가 모달 만들기

내가 필요한 모달은 상세정보로 입장해서 수정 가능한 부분을 수정하고 저장하기 추가 버튼을 누르면 비어있는 부분을 모두 채워서 저장하기 이렇게 두가지였다 한 페이지에서 들어가는것은 물론, CSS가 100% 동일했다. 상세정보의 가짓수가 10가지씩이나 되면 따로 만들었을것도 같지만 수정을 요하는 정보가 많아봤자 2,3개였기 때문에 하나로 이용하기로 했다. 1. 컴포넌트 제작하고 틀 만들기 이건 당연히 둘이 똑같은 틀을 공유한다 2. props로 추가 or 수정을 구별할 값을 넘긴다 나같은 경우엔 당연히 data의 id 값이었다. 3. 받아온 id값을 이용하여 나머지를 구성한다. 4. +)submit 하는 로직에서 받아온 id값에 따라 새 정보를 post 할지, 기존 정보를 update할지 각각 다른 logic 사용하기 사실 그렇게 까지 신박하거나 어려운 로직은 아니다 하지만 난 이런것도 자유자재로 못하던 시절도 있

어제
·
0개의 댓글
·

[MRT] 여러 정보를 한 컬럼 내에서 사용하기

작업하다가 표출은 name으로, 내부적으로 사용은 id를 사용해야하는 상황이 생겼다 (클릭하면 Modal이 열려야하는데, id 정보를 보내야 하기 때문) 이전에 작업했던 내역은 아이콘을 무조건 표출하고 아이디값을 고정으로 받아왔었기 때문에 전혀 도움이 되지 않았다ㅠㅠ 그래서 열심히 찾다가 row에 정보가 담겨있어서 한번에 정보를 사용할수 있다는걸 찾았다! row.original을 사용하여 data로 지정한 정보에 접근 가능!

어제
·
0개의 댓글
·
post-thumbnail

BooList 만들기(7)

Simple List 순차적인 배열을 처리하기 위한 간단한 방법 map 배열을 순회하여 콜백함수를 실행시킴 >💡 map의 콜백함수 파라미터(name)는 임의로 설정하는 변수 순차적으로 콜백함수가 실행되는 것을 알 수 있다. 렌더링 배열의 내용을 잘 순회하여 렌더링이 되는 것을 알 수 있다.

어제
·
0개의 댓글
·
post-thumbnail

React Native Expo 세팅

Expo Go 어플 설치 앱스토어 및 플레이스토어에서 Expo Go 어플을 다운받아줍니다. 저는 안드로이드 핸드폰이고 Window에서 작업하기 때문에 구글스토어에서 다운받았습니다. Expo 실행을 위한 필수 2가지 Node.js Git Watchman (iOS의 경우 설치) Node.js 설치하기 https://velog.io/@bi-sz/Node.js 저는 이전에 설치해두었기 때문에 생략하겠습니다. 기존에 사용하던 Node.js 버전은 8.17.0 버전으로 낮은 버전을 사용하고 있어서 NVM 버전을 통해 최신버전으로 변경해주었습니다. [https:/

어제
·
0개의 댓글
·
post-thumbnail

리액트 포스팅 에디터 개발 및 선정 (suneditor-react )

어드민 페이지에 포스팅할수 있는 에디터를 작업해야 해서 에디터 라이브러리를 찾아보게 되었다. 태그 형식으로 저장을 해서 저장된 값을 태그형식으로 받아서 다른 곳에서 사용해야 했기에 태그로 작성할수 있는 에디터를 찾아보게 되었다. 간단한 작업이라고 생각이 되어서 간단하게 쓰여질 것으로 작업했었다. 처음에는 Toss editor를 사용했고 그다음에는 react-md-editor 를 사용하게 되었는데 이전 글 읽기는 아래 링크 클릭 <a href="https://velog.io/@ljo094822/next-js-toast-uireact-editor-%EB%A1%9C-%ED%8F%AC%EC%8A%A4%ED%8C%85-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%99%80-%EB%8B%

어제
·
0개의 댓글
·