dmscks3126 님의 블로그

node.js가 설치되어있어야 함 React + vite 프로젝트 생성하는 명령어npm create vite@latest Project name 입력Package name 입력프레임워크 선택 (react)variant 선택 : TypeScript

styled-components 라는 라이브러리는 언제 쓸까?컴포넌트가 많은 경우  스타일링을 하다보면 불편함이 생기는데1. class 만들어놓은걸 까먹고 중복해서 또 만들거나2. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나3. CSS 파일이 너무 길어져서 수정이 어렵거나이런 경우들이 있다. 그래서 styled-components 라는 라이브러리를 설치해서 스타일을 바로 입히는 방법이 있다.  설치하는법npm install styled-components 명령어로 설치가능import styled from 'styled-components'그리고 사용하고 싶은 컴포넌트 위에 import  styled-components 기본적인 사용법 이 라이브러리를 이용하면 컴포넌트를 만들 때 스타일을 ..

리액트는 하나의 html 파일만 사용한다.페이지를 나누고싶으면 일반 html css js 사이트는 그냥 html 파일을 여러개 만들지만,리액트는 html을 하나만 사용한다 그래서 리액트에서는 다른 페이지를 요청하면 내부에 있는 를 갈아치워서 보여주면 된다.그런데 직접 코드짜기보다는 react-router-dom 이라는 외부 라이브러리를 설치해서 구현하는게 일반적이다.  react-router-dom 설치하려면https://reactrouter.com/start/framework/installation Installation | React Router reactrouter.com공식 문서 installation을 참고해보면,npx create-react-router@latest my-react-route..

쇼핑몰 프로젝트를 새로 만들어보자.+ CSS를 react-bootstrap 라이브러리를 활용해보자. 새로운 프로젝트 생성npm create vite@latest   React-Bootstrap 라이브러리를 설치해서 이용하기https://react-bootstrap.netlify.app/docs/getting-started/introduction  Introduction | React BootstrapLearn how to include React Bootstrap in your project.react-bootstrap.netlify.app리액트 bootstrap 홈페이지에서 installation을 찾아보자. npm install react-bootstrap bootstrap 터미널에 설치 후,  어떤..

자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면 그냥 쓰면 안되고 props로 전송해서 써야한다. 예시와 함께 보자. 안에 글제목 state 가 필요하다면?function App (){ let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( )}function Modal(){ return ( { 글제목[0] } 날짜 상세내용 )} 이렇게 하면될까? --> 안된다!▲왜냐면 글제목이라는 state 변수는 function App()에 있지 function Modal()에 없기 때문자바스크립트에선 다른 함수에 있는 변수를 마음대로 가져다쓸 수 없다.  ..

fragment 문법- html 코드를 짤 때, return () 내부에는 하나의 태그로 시작해서 하나의 태그로 끝나야 한다. return( ) >> 의미없는 div를 쓰기 싫으면  로 감싸면 된다return( )    Component 문법?: 긴 HTML을 한 단어로 치환해서 넣을 수 있는 문법- 함수나 변수를 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 작성할 수 있다.  EX) Modal을 Component화 시켜서  App 안에 넣기function App (){ return ( (생략) )}function Modal(){ return ( 제목 날짜 상세내용 )..