개발일지

리액트에서 페이지를 나누고 싶을 때, 일반 html, css, js 사이트는 그냥 html 파일을 여러 개 만들면 된다. 하지만 리액트는 html 파일을 하나만 사용한다. 따라서 사용자가 페이지 요청하면 내부에 있는 를 갈아치워서 보여주어야한다. 하지만 직접 코드 짜는 것은 비효율적이므로 react-router-dom 이라는 외부 라이브러리를 설치해서 구현하는 것이 일반적이다. react-router-dom 설치 터미널에 npm install react-router-dom@6 입력하여 설치 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root..

[ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the States", price : 130000 } ] 위와같이 상품 데이터가 array 자료형 안에 object 자료형 세개가 존재하는 형태로 존재한다고 하자. [{},{},{}] 위의 데이터를 state 로 만들고 싶은데 좀 길다. 이럴 땐 다른 파일에 보관했다가 import 해서 사용할 수 있다. (data.js 파일) le..

HTML 안에 이미지 넣고 싶으면 이미지를 import 하고 사용해야한다. import bg from './bg.png' function App(){ return ( ) } 1. import 이름 from './이미지경로' 하고 2. 이미지 경로가 필요한 곳에서 import 한 것 사용한다. 태그 사용하고 싶으면 사용한다. css 파일 사용해도 된다. Public 폴더 용도 여러 소스코드는 src 폴더에 보관하는데, 이미지같은 static 파일의 경우 public 폴더에 보관해도된다. 리액트로 개발을 끝내면 build 해주게 되는데, 지금까지 짰던 코드들을 한 파일로 압축해주는 작업이다. src 폴더에 있던 코드와 파일들은 다 압축 되는데, public 폴더에 있는 것들은 그대로 보존한다. 따라서 형태를..

예전 리액트에서는 class 문법을 사용하였다. 개발하다보면 옛날 코드를 볼 경우도 있으니 참고해두면 좋다. class Modal2 extends React.Component { constructor(){ super() } render(){ return ( Hi ) } } 1. class 컴포넌트 이름을 작명한다. 2. constructor, super, render 함수 3개 채워넣는다 (생성자) 3. 컴포넌트는 길고 복잡한 HTML을 축약할 때 사용. return 안에 축약할 HTML을 적는다. class 컴포넌트 안에서 state 사용 class Modal2 extends React.Component { constructor(){ super(); this.state = { name : 'kim', ..

자바스크립트에서는 다른 함수에 있는 변수를 마음대로 사용할 수 없다. 컴포넌트 2개가 부모 / 자식 관계인 경우는 사용 가능 부모 컴포넌트의 state 를 자식 컴포넌트로 전송해줄 수 있다. 전송 시, props 라는 문법을 사용한다. props 로 부모 -> 자식 state 전송하는 법 1. 자식 컴포넌트 사용하는 곳에서 2. 자식컴포넌트 만드는 function 으로 가서 props 라는 파라미터 등록 후 props.이름 사용한다. title 이라는 부모 컴포넌트의 state 를 자식 컴포넌트 에 전송하기 function App() { let [title, setTitle] = useState([ "title1", "title2", "title3", ]); return ( ) } function Mod..

map 함수 사용 array 자료형에는 map() 함수를 사용할 수 있다. var array = [2, 3, 4]; array.map(function(){ console.log(1); }) 1. array에 들어있는 자료의 갯수만큼 그 안에 있는 코드를 반복 실행해준다. console.log(1); 세 번 실행 var array = [2, 3, 4]; array.map(function(a){ console.log(a); }) 2. 콜백함수에 파라미터는 배열을 순회하며 모든 자료를 하나씩 출력해준다. 콘솔창에 2, 3, 4 출력 var array = [2, 3, 4]; var newArray = array.map(function(a){ return a * 10; }) console.log(newArray)..