개발/React13

• 

  styled-components 라이브러리 설치 및 간단한 사용법 styled-components 왜 쓰는가 컴포넌트가 많아질수록 아래의 문제점이 생긴다. 1. class 만들어놓은걸 까먹고 중복해서 또 만들거나 2. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나 3. CSS 파일이 너무 길어져서 수정이 어렵거나 설치법 터미널 열어서 npm install styled-components 쓰고싶은 파일에 import styled from 'styled-components' 끗! 사용법 컴포넌트를 만들때 스타일을 미리 주입해서 만들 수 있다. 를 만들고 싶으면 let 변수명 = styled.div`css` 를 만들고 싶으면 let 변수명 = styled.button`css` import styled from 'styled-components'; let Box.. 개발/React 2023. 8. 18.

• 

  react router 사용법 0. react router를 사용하는 이유 html css js는 html을 하나 더 만들면 그게 새로운 하나의 페이지가 되는데 react는 html파일을 하나만 사용한다. 그래서 react는 다른 페이지를 요청하면 내부에 있는 를 갈아치워서 보여주면 된다. -> 이걸 코드로 짜서 해도되지만 귀찮으니깐 react-router-dom이라는 외부 라이브러리를 설치해서 구현하는게 일반적이다. 1. 설치법 react-router-dom 홈페이지를 보면되지만 그냥 터미널에서 아래의 코드를 적어도된다. npm install react-router-dom@6 그 다음 index.js에 가서 BrowseRouter를 import해와서 App을 감싸면 된다. //index.js import { BrowserRouter.. 개발/React 2023. 8. 16.

• 

  React 기초지식들 React를 사용하는 이유 1. Single Page Application 페이지 전환이 새로고침없이 부드럽게 동작한다. html 파일을 1개만 쓴다. 다른 페이지를 보여주고 싶을 때 html 부분만 샥 갈아치워서 보여준다. 2. html 관리 html을 함수, array, object 이런 곳에 보관하고 재사용할 수 있다. 3. React Native 모바일 앱개발 쌉가능 4. 회사에서 요구해서 취직은 해야지? React 설치 1. nodsjs를 설치한다. 2. 폴더를 만든다. 3. 우클릭 - 서비스 - 폴더에서 새로운 터미널 열기 4. 터미널에 npx create-react-app {폴더명} 적기 5. vscord로 폴더를 연다. 끗! React에서 사용하는 JSX 문법 3개 react에서는 htm.. 개발/React 2023. 8. 14.