개발일지

컴포넌트의 Lifecycle 을 배우는 이유는 componentDidMount() 등 유용한 Lifecycle 함수들을 쓰기 위해서이다. 요즘은 간편한 useEffect() 라는 react hook 을 많이 사용한다. 컴포넌트의 Lifecycle 컴포넌트는 1. 생성 될 수도 있고 (mount) 2. 재렌더링 될 수도 있고 (update) 3. 삭제될 수도 있다. (unmount) 컴포넌트의 lifecycle 을 배우는 이유는 컴포넌트 lifecycle 중간중간에 간섭할 수 있기 때문이다. 컴포넌트가 장착될 때 특정 코드를 실행할 수도 있고, 컴포넌트 업데이트 될 때 특정 코드를 실행할 수도 있다. 이러한 방법으로 여러 기능들을 개발할 수 있다. 예전 React 에서 Lifecycle Hook 쓰는 법 ..

navigate, nested routes, outlet 을 사용하기 위해선 상단에 먼저 import 해준다. import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom' 페이지 이동기능 useNavigate() 페이지 이동을 할 때 Link 를 사용해도 되지만, useNavigate() 사용하면 더 편리하다. function App(){ let navigate = useNavigate() return ( (생략) { navigate('/detail') }}>이동버튼 ) } useNavigate() 사용하면 유용한 함수들을 사용할 수 있는데, 페이지 이동 기능을 사용할 수 있다. navigate('/detail') 사용하면 /de..

리액트에서 페이지를 나누고 싶을 때, 일반 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)..

React 사용 이유 1. Single Page Application (SPA) 만들 때 사용 새로고침 없이 앱처럼 부드럽게 동작하는 웹페이지 html 파일을 한개만 사용하여 다른 페이지 보여주고 싶을 때 html 부분 다 갈아 치워서 보여줌 2. html 재사용 편리 변수에 html 담아서 사용할 수 있기 때문에 3. 같은 문법으로 앱 개발 가능 (React Native) 리액트 프로젝트 생성 1. 작업용 폴더 하나 생성 2. 터미널에서 해당 폴더 접근 후 npx create-react-app '프로젝트명' 입력 3. 해당 프로젝트 폴더 vscode 에서 열기 4. App.js 가 메인 페이지이므로 App.js 에서 코드 짜줌 5. 브라우저로 미리보기 띄우고 싶으면 터미널에 npm start 입력 Ap..