굥뷰를 햡시댜

이전에 json-server db에 저장한 데이터를 확인하기 위한 페이지를 만들려고 한다. ㅎㅎ 그러려면 일단 React Router를 설치해야한다. (npm install react-router-dom 실행하면 된다. ㅎㅎ) - 관련 사이트 https://reactrouter.com Home v6.10.0 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.co..

DB에 데이터를 저장할 때 axios를 많이 쓴다고 한다. ㅎㅎ; 1. axios 설치 (npm install axios) 2. axios import 3. axios.post 실행 -> onSubmit() 함수에 추가해준다. -> 첫번째 인자는 서버 주소, 두번째 인자는 보낼 데이터 const onSubmit = () => { axios.post('http://localhost:3001/posts', { title: title, body: body }); }; 4. react 앱 실행, json-server 실행 -> react 앱은 평소처럼 실행하면 되고, json-server 실행의 경우 같은 포트를 사용할 수 없기 때문에 다른 포트로 실행해준다.(json-server --watch db.json ..

리액트 앱과 연결될 서버를 구축하려 하는데 mssql, mysql 등 다른 DB들이 아닌, json-server를 이용해 DB를 구축해볼 예정이다.(쉽고 간단.. 하기 때문) + (npmjs.com에 접속해서 관련 문서들을 볼 수 있다.) 1. 터미널에 npm install json-server를 입력한다. (-g는 글로벌 옵션인데 이렇게 설치할 경우 다른 프로젝트에서도 json-server를 사용할 수 있다. ㅎㅎ) 2. db.json 파일을 만들어준다. (package.json과 같은 위치에 만들어줘야 한다. ㅎㅎ) -> db.json 파일을 편집한다. (posts는 테이블 명이고 값으로 들어오는 배열([])에 컬럼명, 값의 형식으로 데이터를 넣어준다.) 3. json-server를 실행시킨다.(js..

리액트 컴포넌트에서는 state 값의 변동이 생길 때 마다 렌더링이 새로 이뤄진다. 1. 아래 코드를 입력한다. import {useState} from 'react'; function App() { const [title, setTitle] = useState(''); const [body, setBody] = useState(''); console.log('check'); const onSubmit = () => { console.log(title, body); }; return ( Title { setTitle(e.target.value) }}/> Body { setBody(e.target.value) }}/> Post ) } export default App; 2. 리액트 앱을 실행시킨다. 3. ..

React 컴포넌트에서는 컴포넌트 내부에서 선언한 변수의 값이 바뀌더라도, 화면에 그려진 값이 바뀌지 않는다. 이럴 때 useState를 사용해서 값이 바뀌었을 때 바로바로 반영해준다. import {useState} from 'react'; function App() { const [number, setNumber] = useState(1); const double = () => { const doubleNumber = number * 2; setNumber(doubleNumber); console.log(doubleNumber); }; return ( {number} Submit ) } export default App;

React Component에서 버튼 클릭시 이벤트를 주는 방법을 코드로 작성해보도록 하겠습니다. function App() { const number = 1; const double = (number) => { return number * 2; }; return ( {double(number)} { console.log('hello') }}>Submit ) } export default App; onClick 이벤트 작성시 C를 반드시 대문자로 입력해주셔야 합니다. (React 규칙이고, 나중에 다른 이벤트들도 마찬가지입니다.) Submit 버튼 클릭시 콘솔에 hello라는 로그를 남기는 코드입니다. 개발자 도구를 열고 보시면 아래와 같이 확인할 수 있습니다. ㅎㅎ 이 코드는 아래와 같이 바꿔서 작성할..

1. Fragment란? -> 컴포넌트를 감싸는 녀석(?) 이라고 보면 됩니다. ㅎㅎ 이렇게 말하면 너무 불친절 하니까 아래 부가적으로 Fragment를 설명해보겠습니다. 2. Fragment를 사용하는 이유? -> 기본적으로 한 컴포넌트에서 jsx 템플릿을 반환한다고 이전 게시물들에서 설명했습니다. 이 때, 여러 html 태그를 return 하고 싶으면 어떻게 해야 할까요? 이럴 때 사용하는 것이 Fragment 입니다. Fragment를 사용하는 방법은 3가지가 있지만 가장 간단한 방식을 아래 예제 코드로 보여드리겠습니다. /src/App.js 파일 코드를 한 번 보시죠! function App() { const number = 1; const double = (number) => { return n..

이전 게시물에서 만든 프로젝트에서 /src/App.js 코드를 아래와 같이 수정했다. function App() { const number = 1;// 변수 선언 및 초기화 const double = (number) => { return number * 2; };// 화살표 함수 생성 (number)는 파라미터 return ( {double(number)} )//2번째 줄에 선언한 number를 파라미터로 넘김 } export default App; 이런 식으로 화살표 함수를 작성하고, 실행할 수 있다. (일반 함수로 만들어줘도 되지만, 요즘 트렌드가 화살표 함수를 사용하는 것이기도 하고 훨씬 간결하다. ㅎㅎ)