STUDY66 [React] 서버와 통신하려면, ajax 🌱 들어가기 전에서버란?유저가 데이터를 요청하면 데이터를 보내주는 간단한 프로그램이다.서버 개발을 한다는 것은 A 데이터를 요청하면 A 데이터를 보내주세요 라고 코드를 짜는 것이다. 서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야 한다.1. 어떤 데이터인지 (URL 형식으로)2. 어떤 방법으로 요청할지 (GET or POST)GET : 데이터를 가지고 올 때POST : 데이터를 보낼 때 GET/POST 요청하는 법GET 요청을 날리는 가장 쉬운 방법은 브라우저 주소창이다.URL을 적으면 그곳으로 GET 요청을 날려 준다. POST 요청을 날리고 싶으면 태그를 이용하면 된다.그러면 폼이 전송되었을 때 POST 요청을 날려 준다. 그런데 GET, POST 요청을 이렇게 날리면 브라우저가 새로고.. 2024. 8. 16. [React] Lifecycle과 useEffect Lifecycle(생명주기)란?리액트의 컴포넌트는 1. 생성(mount) → 2.업데이트 (update) → 3.제거 (unmount)의 생명주기를 갖는다. 컴포넌트에 Lifecycle 개념을 이용하여 컴포넌트 중간중간에 간섭을 할 수 있다. 간섭은 그냥 코드 실행이다.'Detail 컴포넌트 등장 전에 이것 좀 해 줘' 'Detail 컴포넌트 사라지기 전에 이것 좀 해 줘' 'Detail 컴포넌트 업데이트 후에 이것 좀 해 줘' 이렇게 코드를 실행해 달라고 갈고리를 달아 간섭할 수 있고, 갈고리를 달아 코드를 넣어 주면 된다.그러면 페이지 장착시, 업데이트시, 제거시 코드 실행이 가능하다.이 갈고리를 hook이라고 하고, 이러한 것들을 Lifecycle hook이라고 부른다. Class Comp.. 2024. 8. 12. [React] styled-components styled-components컴포넌트가 많은 경우 css 스타일링을 하다 보면 불편함이 생기는데class를 중복해서 만드는 경우갑자기 다른 컴포넌트에 원하지 앟는 스타일링이 적용되는 경우css 파일이 길어져 수정이 어려운 경우등이 있다. 그래서 스타일을 바로 입혀서 컴포넌트를 만들 수 있는데, styled-components라는 인기 라이브러리르 설치하여 사용하면 된다. 설치/세팅 터미널을 열고 설치 명령어를 입력해 준다. npm install styled-components 그리고 사용하고 싶은 컴포넌트 제일 상단에 import 하여 사용한다.import styled from 'styled-components'기본적인 사용법이 라이브러리를 이용하면 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수.. 2024. 8. 12. [React] 리액트 라우터 : URL 파라미터 URL 파라미터로 여러개의 상세 페이지 만들기 } /> } /> } /> 여러개의 상세 페이지를 만들 때 를 여러개 작성하여 만들 수도 있지만 URL 파라미터 문법을 사용하여 간편하게 만들 수 있다. }/> path 작명할 때 /:변수 이렇게 사용하면 "아무 문자"를 뜻한다.그래서 위의 는 사용자가 주소창에 /detail/아무 문자 입력했을 때 컴포넌트를 보여 달라는 뜻이다. /detail/0/detail/1/detail/2이렇게 접속해도 컴포넌트를 보여줄 수 있다. useParams()useParams()은 react-router-dom에서 제공하는 Hooks 중 하나로 파라미터에 입력한 값을 URL을 통해 넘겨받은 페이지에서 사용할 수 있도록 해 준다. 1. useParam.. 2024. 8. 7. [React] 리액트 라우터 : navigate, nested routes, outlet 🌱 들어가기 전에리액트 프로젝트 폴더 구조는 비슷한 .js 파일끼리 한 폴더에 묶어 놓는 것이 좋은 폴더 구조이다.📁 component : 컴포넌트 역할하는 js 파일📁 routes/pages: 페이지 역할하는 js 파일📁 utils : 자주 사용하는 함수가 들어가는 js 파일필요할 때마다 폴더 만들어 사용 리액트 라우터페이지 이동 기능 : useNavigate() 페이지 이동은 Link를 사용해도 되지만 useNavigate()를 사용해도 된다. (App.js)import { useNavigate } from 'react-router-dom';function App() { let navigate = useNavigate(); return ( { navigate('/deta.. 2024. 8. 7. [React] 리액트 라우터 : 세팅, 기본 라우팅, 페이지 나누기 페이지를 나누고 싶으면 일반 html,css,js 사이트는 html 파일을 여러개 만드면 html 파일이 각각 하나의 페이지지만 리액트는 html 파일을 하나만 사용한다.리액트에서는 다른 페이지를 요청하면 내부에 있는 를 변경하여 보여 준다.직접 코드를 짜는 것보다 react-router-dom이라는 외부 라이브러리를 설치하여 구현하는 게 일반적이다. react-router-dom 설치터미널을 열고 설치 명령어를 입력해 준다.npm install react-router-dom@6 react-router-dom 세팅(index.js)import { BrowserRouter } from 'react-router-dom';const root = ReactDOM.createRoot(document.getEl.. 2024. 8. 7. [React] 코드가 길어지면 import export export default / import 문법 데이터를 다른 파일에 보관해 뒀다가 import를 해 올 수 있다.예를 들어 data.js라는 파일에 있는 변수를 App.js에서 가져와서 사용한다고 해 보자. (data.js)let a = 10;export default a; export default 변수명; 는 원하는 변수를 밖으로 내보낼 수 있다. (App.js)import a from './data.js'console.log(a) export 했던 변수를 다른 파일에서 사용하고 싶으면 import 작명 from './파일경로'위 코드에선 a 출력해 보면 10이 나온다. (유의할 점)변수, 함수, 자료형 전부 export 가능.파일마다 export default라는 키워드는 하나만 사용 가능.파일 .. 2024. 8. 6. [React] 이미지 넣기 & public 폴더 이미지 넣은 방법1. CSS 안에서css 파일에서 src 폴더 안에 있는 사진을 싶으면 ./이미지경로 사용하면 된다.(App.css).main-bg { height: 300px; background-image: url('./bg.jpg');} 2. HTML 안에서html 파일에 이미지를 넣고 싶으면 이미지를 import 한 후 사용해야한다.(App.js)import bg from './bg.jpg';function App() { return ( );} (1) import 작명 from './이미지경로'(2) 이미지 경로가 필요한 곳에서 작명한 걸 사용( 태그 쓰고 싶으면 이렇게 사용해도 됨) public 폴더여러가지 소스 코드는 src 폴더에 보관하면 되는데 이미지 .. 2024. 8. 6. [React] React-Bootstrap 사용하기 React-Bootstrap 라이브러리란?Bootstrap은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다.React-Bootstrap은 Bootstrap을 React에 맞게 변형한 것이다. https://react-bootstrap.netlify.app/자세한 내용은 공식 사이트를 살펴 보자. React-Bootstrap 설치리액트 부트스트랩 사이트에 접속해서 Get started를 클릭하면 설치하는 방법이 설명되어 있다. 1. 터미널에 설치 명령어 입력npm install react-bootstrap bootstrap▲ 명령어는 변경될 수 있기 때문에 사이트에서 확인하는 것이 좋다 2. Bootstrap CSS 파일을 요구하는 경우(1) App.js에 import css{ .. 2024. 8. 6. [React 기초] 리액트 사이트 buid & Github Pages로 배포하기 만든 사이트를 배포하려면 작업하던 App.js 파일 그대로 올리는 것이 아니라 build용 파일을 생성한 수 그 파일을 올려야 한다. 웹 브라우저는 HTML, CSS, JS 이 3개의 언어만 해석할 수 있기 때문에 리액트의 state, jsx등은 해석하지 못 한다.그래서 리액트 프로젝트를 build 하면 브라우저 친화적인 HTML, CSS, JS 파일로 바꿔 준다.이 바꿔 준 파일을 올려야 사용자들이 웹을 볼 수 있다. 이전 포스팅들을 통해 만든 프로젝트를 Github Page를 이용해 배포해 보도록 하자. 💡 배포하기 전 체크할 사항1. 미리보기를 띄워 볼 때 콘솔창, 터미널에 에러가 발생해서는 안 된다.(warning 메시지는 사이트 구동에 별 영향이 없기 때문에 테스트할 때는 무시해도 됨).. 2024. 8. 5. [React 기초] input 다루기 보호되어 있는 글 입니다. 2024. 8. 5. [React 기초] props : 자식이 부모의 state 가져다 쓰고 싶을 때 지난 포스팅에서 글 제목을 누르면 모달창이 나타나는 기능을 만들었다.그런데 모달창 내부에도 글 제목을 넣고 싶으면 어떻게 해야 할까? 이렇게 작성하면 될 것 같지만 post라는 변수가 정의되지 않았다는 에러가 뜬다. 왜?왜냐하면 post라는 state는 function App()에 있는 것이지 function Modal()에 있는 게 아니기 때문이다.자바스크립트에서는 다른 함수에 있는 변수를 마음대로 가져다 쓸 수 없다. 하지만 컴포넌트 2개가 부모/자식 관계인 경우에는 가능하다.(다른 컴포넌트 안에 있는 컴포넌트를 자식 컴포넌트라고 부른다.)부모 컴포넌트의 state를 자식 컴포넌트로 전송해 줄 수 있고, 그러면 자식 컴포넌트도 state 사용이 가능하다.state를 전송할 때에는 props라는 문법.. 2024. 8. 2. 이전 1 2 3 4 5 6 다음
