Programing/react (13) 썸네일형 리스트형 [React] - Lifecycle, useEffect componets 생성 - mount 재렌더링 - update 삭제 - unmount "Detail 컴포넌트 등장 전에 이것좀 해줘" "Detail 컴포넌트 사라지기 전에 이것좀 해줘" "Detail 컴포넌트 업데이트 되고나서 이것좀 해줘" 이렇게 코드좀 실행해달라고 간섭할 수 있는데 간섭은 갈고리를 달아서 합니다. 갈고리를 달아서 코드를 넣어주면 됩니다. 그럼 진짜 페이지 장착시, 업데이트시, 제거시 코드실행가능 갈고리는 영어로 hook이라고 합니다. 그래서 저걸 Lifecycle hook 이라고 부릅니다. import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ ... console.log('안녕') }, []); re.. [React] - styled-components npm install styled-components import styled from 'styled-components'; let Box = styled.div` padding : 20px; color : grey `; let YellowBtn = styled.button` background : yellow; color : black; padding : 10px; `; function Detail(){ return ( 버튼 ) } 장점1. CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일넣을 수 있습니다. 장점2. 여기 적은 스타일이 다른 JS 파일로 오염되지 않습니다. 장점3. 페이지 로딩시간 단축됩니다. 단점1. JS 파일이 매우 복잡해집니다. 그리고 이 컴포넌트가 styled 인지 아니면 .. [React] - react-router-dom npm install react-router-dom@6 npm 설치 세팅 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); app 감싸기 페이지 나누는 법 import { Routes, Route, Link } from 'react-router-dom' import Detail from './routes/Detail.js' import About from './roues/About.js' function App(){ return ( ... ) } 페이지 이동 버튼 홈 상세페이지 페이지 이동기능 useNavigate() .. [React] - 이미지 넣는 법 import bg from '../bg.jpg'; const Test = () => { return ( ); } 리액트로 개발을 끝내면 build 작업이라는걸 하는데, 지금까지 짰던 코드를 한 파일로 압축해주는 작업입니다. src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해줍니다. 그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 js 파일은 그럴 일은 거의 없고 이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관없습니다. public 폴더 안에 이미지가 있는 경우 나는 그냥 src 폴더안에 resource 폴더에 넣어서 사용한다. [React] - input 태그 에 입력한 값 가져오는 법 { console.log(e.target.value) }}/> e - 작명 자유롭게 가능 e.target 현재 이벤트가 발생한 곳을 알려주고 e.preventDefault() 이벤트 기본 동작을 막아주고 e.stopPropagation() 이벤트 버블링도 막아줍니다. 이거 쓰면 좋아요버튼 누를 때 모달창도 떠버리는 버그 해결가능 사용자가 input에 입력한 데이터 저장하기 const Test = () => { let [title, setTitle] = useState('') return ( { setTitle(e.target.value) console.log(title); }}/> ); } * 첫 입력한 값이 안뜨는 이유는 state 변경함수 특징 때문, state 변경함수는 .. [React] - state 값 전달 props const Test = () => { let [title, setTitle] = useState(['바나나', '딸기', '사과']) return ( ); } const Modal = (props) => { return( modal {props.title[0]} ) } * 꼭 부모에서 자식으로만 보낼 수 있다. 일반 변수, 함수 전송도 가능하고 일반 문자전송은 중괄호 없이 이렇게 해도 됩니다. [React] - 반복문 map() react 하기전 ejs 사용할때에는 for으로 돌렸는데 jsx에서는 map()함수를 이용해야한다. (굳이 for 반복문을 할 순 있는데 코드도 길고 이젠 map() 더 편함) const Test = () => { let [title, setTitle] = useState(['바나나', '딸기', '사과']) return ( { title.map((item, index) => { return {item} }) } ); } title을 반복문으로 돌려보았다. 첫인자로는 val 값을 임의로 작명할 수 있고, 두번째는 값의 길이만큼 0부터 자동 증가한다. 그리고 map() 돌릴 때 항상 최상위 부모에 key 값을 넣으라하는데 여기에 index 값이나 item의 id 값이 있다면 넣어주면 된다. [React] - 컴포넌트(Component) . react 특성 중 하나 반복되는 html을 컴포넌트로 빼 재사용 할 수 있다. Component 만들 때 주의사항 1. component 작명할 땐 영어대문자로 보통 작명합니다. 2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없습니다. 3. function App(){} 내부에서 만들면 안됩니다. 왜냐면 function App(){} 이것도 다시보니 컴포넌트 생성문법이죠? component 안에 component 를 만들진 않습니다. 4. 이렇게 써도 되고 이렇게 써도 됩니다. const Test = () => { return ( ); } const Modal = () => { return( modal ) } Modal 이 Modal.js 로 다른파일에 있다면 Test.j.. 이전 1 2 다음
