본문 바로가기

Front/React24

[React] SpringBoot + React 데이터 불러오는 방법 리액트는 로직 구조를 이해 하는게 중요하기 때문에, 절대적으로 블로그에 포스트를 해야됨을 느낀다... 아 그리고,,, 내가하는건는 좀 일방적으로 구글이나 유튜브에서 가르쳐주시는 분들이랑은 좀 많이 다른 내용이니까.... 양해 바란다... Now Let's do it blogging ! 리액트 파일구조 이렇게 해서 총 ListContent, ListFilter, Index, List, Product 5개의 jsx. 파일을 이용하고있는데, 굳이? 이걸 이렇게까지 나눌 필요는 없다. 그냥 팀회의때 파일구조를 이런식으로 잡자는 이야기가 나왔고, 리액트의 재사용성을 최대화하기 위해서 만든 구조니까 굳이 이런 구조를 똑같이 잡을 필요는 없다. 데이터를 뽑아오는 순서 index.jsx index.jsx 에서 Rout.. 2022. 11. 13.
[React] 리엑트 useRef 사용 방법 리액트는 정말 많은 라이브러리가 있다. 그 중 useRef를 사용해보자.. 리엑트인가 리액트인가? useRef 우선 시작하기 전에 useRef를 import 해주는건 잊지말자 다음 같이 변수 선언 해주고 초기 값을 잡아준다. Null 을 넣어주어라. (국룰) 다음과 같이 ref={변수 명} 을 넣어주면 그 해당 element를 인식한다. 그러면 다음과 같이 데이터를 넣게 되면 title.current.value 값은 = 김제동 content.current.value 값은 = 김제동 이런식으로 들어가게된다. 이제 저렇게 title 변수에 들어가게된 데이터를 본인이 담고 싶은 변수에 담아주면 된다. 나같은 경우는 TITLE, CONTENT 대문자로 담아주었고 그걸 data 에 데이터를 담아서 사용 하였다. .. 2022. 11. 11.
[React] 리엑트 return () 줄맞춤의 중요성 이번에 새로운 프로젝트를 하면서 Back 은 이클립스로 Front 는 리액해서 프로젝트를 진행하고있다. 리액트는 생각보다 어렵다. return 문제가 되는 부분 자 여기서 보면 어디서 문제가 되는지 전혀 찾아 볼 수가 없다. 근데 ? 페이지가 안뜬다. return 바꿔주는 부분 다음 부분에 return 소괄호의 위치가 문제가 되는것이다..... 아주 잘 작동되는 것을 확인해 볼 수가 있다. return 소괄호 위치 잘 맞춰주자.... To be continue.. 2022. 11. 3.
[React] yarn을 사용 하는 이유 ? yarn yarn 이 npm 의 조금 더 개선된 버전이라고 생각하면된다. 그치만 yarn보다 npm이 익숙하다면, npm 사용해도 좋다. 사실 굳이 큰 차이는 잘 못느끼겟다 아직. To be continue.. 2022. 9. 19.
[React] 리엑트 버튼 클릭시 모달창 생성 바로 시작! State 사용 선언 State문법을 사용해주기 위해서 다음과 같은 선언을 해주어야한다. State문법 사용 이게 바로 state문법이다. modal 은 변수, setModal은 함수 이다. useState 디폴트 상태는 false (디폴트 값이 false면 기본으로 작동하지 않는 상태를 유지한다 라고 나는 이해했다) Modal 만들기 내가 쓰고 있는 프레임워크는 인텔리제이여서 작동 중이면 초록불이 들어온다. 스프링도 비슷한 지원하는게 있을 수 있으니 찾아보길 권장, 그치만 리액트는 인텔리제이로 하는게 맞지않나 싶다. 다음과 같이 잘 모달 창을 만들어준다. 화면 호출 ⭐⭐⭐⭐⭐ 자 여기가 진짜 중요한 설명이다. 집중! 버튼은 상세보기를 클릭 했을 때 모달창이 On/Off 된다. 그 이유는 s.. 2022. 9. 19.
[React] 리엑트 버튼 클릭 시 모달창 생성하는 방법 리엑트로 버튼 클릭시 간단한 모달창이 뜨게 만들어보자 결과 모달창 여닫기 클릭을 누르면 다음과 같은 모달이 등장 다시 클릭하면 없애지는 결과이다. 부트스트랩 모달만 쓰다가 이렇게 직접 만들어 보니까 좀 새롭다. App.js function App() { let [modal, setModal] = useState(false); return ( { setModal(!modal) } }>모달창 여닫기 {modal === true ? : null} ); function Modal() { return ( 제목 날짜 상세내용 ) } 간단한 코드 내용을 설명해보자면, let [modal, setModal ] = useState(false); modal 은 변수명 / setModal은 함수 명이다. : 버튼이 클릭되었.. 2022. 9. 16.
[React] useState 사용하는 이유 및 사용하는 방법 useState를 사용하는 이유는 페이징이 새로고침이 되지 않아도 알아서 원하는 데이터를 바뀐다는것이 가장 큰 장점이다. 중요한건 무조건 useState로 만들어서 사용해야좋다. App.js import React, { useState } from 'react'; 맨위에 이거한줄 넣어준다. (useState) 사용하겠다는 선언. let [a,b] = useState('남자 코트 추천', '여자 청바지 추천' ); // ES6 destructuring 문법 = var [a,b] = [10, 100]; a[0] = '남자 코트 추천' a[1] = '여자 청바지 추천' 이라는 의미이다. return ( 개발 BLOG { a } 2월 17일 발행 ); } { a } 보면 확인 해 볼 수 있다. 나오게 된다. 만.. 2022. 9. 7.
[React] 이클립스 리엑트 초기 세팅 이번에 맡게 될 프로젝트에서 리엑트만 사용한다고 들었다. 그래서 리엑트 공부를 시작한다. 세팅 이클립스 마켓 -> React 검색 React Install 하고 Restart 까지 해준다. Other 클릭해서 React Project를 생성 프로젝트 이름을 정해주고 Finish 클릭 프로젝트 우클릭 -> Show in -> Terminal npm install 입력 완료 node_modules 라는 폴더가 생긴다. 그리고 터미널에 > create-react-app 실행 서버 키고 모르겠으면 더블클릭해서 Run check 하면 자동으로 할당된다. Run 체크해주면 작동한다. 서버 켜주는것 잊지말자. 기본포트는 http://localhost:3000/index/ 이다. To be continue.. 2022. 9. 6.

티스토리툴바