hanol hanol

export와 import하는 법 특정 변수를 내보낼 때 export default 변수명; - 가져다 쓸 때 import 작명 from '/index.js'; 여러개를 내보낼 때 export let a = 10; export {b, c}; - 가져다 쓸 때 import {a, b, c} from './index.js'; 🚨 여러개를 보낼 때는 { 중괄호 }로 감싸주어야 하고, 가져올 때 변수명을 내보낸 그대로 가져와야 함!! 대량의 변수들을 보낼 때 : * import * as user from "./index.js"; console.log(user.name) const 재할당 불가능 ( let은 재할당 가능) const => 변수를 바꿀 수는 없지만 배열은 조작가능 함수 function good() ..

import React, { useState, useRef } from 'react'; import axios from '../../axios'; const Save = () => { const [data, setData] = useState(['']); const [image, setImage] = useState(['']); const title = useRef(); const createFile = () => { axios.post('/upload/createFile', { data, title: title.current.value }) .then(res => { console.log(res.data); }) .catch(err => { console.error(err); }); }; const r..

👁‍🗨 create app 리액트 라이브러리 설치하기 npx create-react-app blog node_modules : 라이브러리 코드 보관 public폴더 : static 파일 모아놓는곳 src : 소스코드 보관함 package.json : 라이브러리 정보 npm start 👁‍🗨 리액트 부트스트랩 라이브러리 npm install react-bootstrap bootstrap https://react-bootstrap.netlify.app/ React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app 👁‍🗨 class명은 className으로 씀 ..

🤷‍♀️ 리덕스란? Javascript 상태관리 라이브러리이다 컴포넌트들이 props없이 state 공유가능하게 해준다!! 상태 관리가 필요한 이유는 프로젝트 규모가 커지면서 상태 데이터의 전달과 업데이트가 복잡해지고, 코드의 가독성과 유지보수가 어려워지기 때문이다. Props를 통해 상태를 전달하게 되면 코드가 복잡해지고, 상태 변경 시 불필요한 컴포넌트 리렌더링이 발생할 수 있다. => Redux는 이러한 문제를 해결하기 위한 상태 관리 라이브러리이다 👾 Redux는 store.js 한곳에 state들을 저장해두어 모든 컴포넌트들이 직접 가져다 쓸수있다!! (즉, 상태관리를 컴포넌트의 바깥에서 하는 것임) 🤷‍♀️ 리덕스 툴킷(Redux-Toolkit) 이란? 효율적인 Redux 개발을 위한 저희의 ..

🥕 props ( properites(속성)의 약자 ) 부모 컴포넌트에서 자식 컴포넌트에 전달해 주는 값을 props 라고 함 (key : value) 객체형태로 컴포넌트에 넘겨줄 수 있음 App.js (부모컴포넌트) // 부모 컴포넌트 import React from 'react'; import Mypage from './Mypage'; function App() { return ( ); } export default App; 🥕 문자열 이외에 정수, 변수, 다른 컴포넌트 등이 들어갈 경우 중괄호를 사용해서 감싸줘야 함 Mypage.jsx (자식 컴포넌트) import React from 'react'; const Mypage = (props) => { return ( 자식컴포넌트{props.title..

본격 실전 프로젝트 들어가기전 팀원들과 우아한 형제들 클론코딩을 해보자! 해서 일주일 정도 프로젝트를 진행하는데 역시 프로젝트를 하면서 배우는게 정말 많은 것 같다. 어떤 걸 써야하나라는 고민에서부터 이걸 왜 쓰지?라는 의문점도 생겨서 다시 그전에 공부했던 것들을 찾아보면서 개념 정리를 다시한번 하게 되는 것 같다. 페이지 navbar를 구현하려고 했을 때 머릿속에 a태그와 link컴포넌트, useNavigate라는 훅까지 한번에 떠올랐는데 어떤걸 써야할까?라는생각이들었고 우선 a태그는 html에서 사용하는 태그인데 리액트에는 link컴포넌트로 써라~ 라고 배웠고, useNavigate도 페이지를 써야하는데 link컴포넌트와 둘중에 무엇을 써야하는지 고민이 되었다. 그래서 차이점을 이해하고자 찾아보았다...

🥕 useEffect 컴포넌트가 렌더링 될 때 실행할 수 있도록 하는 리액트 Hook임 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 라이프사이클 메서드와 같은 역할 => 렌더링될때마다 매번 실행됨 (= 컴포넌트가 Mount 될 때에만 실행 ) useEffect(()=>{ //실행코드 }); 🥕 useEffect ( ( ) => { , [ array ] } => 마운트 + array 변경 시 실행됨 첫번째 인자는 함수, 두번째 인자는 배열이 들어감 mount될때 실행되고 array가 변경될 때마다 실행됨 // 렌더링될 때마다 매번 실행됨 useEffect(()=>{ //실행코드 }, [array] ); 🥕 useCallback..

html이 길어져서 복잡할 땐 컴포넌트 만들어 사용하기 컴포넌트를 작성할 때는 약간의 규칙을 지켜야 한다 ❗ 함수 작명은 대문자로 시작해야함 ❗ retrun 안에 html은 하나의 태그로 감싸져야 함 function Modal() { return ( 제목 날짜 상세내용 ) } 원하는 위치에 태그형식으로 사용하면 됨~ 컴포넌트는 언제 만들어 쓰면 좋을까? 1. 반복적인 html 축약할 때 ( ex. map함수 사용 가능한 것들..) 2. 큰 페이지들 😈 😈 1. html 미리 완성하기 2. UI 현재상태 state로 저장 3. state에 따라 UI 변화주기 => 어렵게 생각하지말고 차근차근 step밟아나가자! 😈 모달창 구현하기 1. Modal 컴포넌트 만들기 const Mod..