이번에 백, 프론트 함께 하는 프로젝트를 처음 해보면서 남이 해주던 "초기 설정" 을 처음으로 제가 해보게 되었습니다. 감사하게도 같은팀에 실력 좋으신 분이 저한테 한번 해보라며 도움을 주셔서 금방 해냈습니다..(울컥) 사실 이 초기설정이라는건 그때그때 다르겠지만, 그래도 저같은 왕초보를 위한..? 글.. 우선, cra / react-router-dom / axios / tailwindcss 이렇게 네가지를 다운받았습니다. 1. 프로젝트 생성 및 라우터 설치 -> 먼저 , create-react-app 으로 프로젝트를 생성한 뒤 cd 명령어로 해당 프로젝트로 이동해줬습니다. 그리고 이렇게 라우터 버전6 까지 설치해주면 cra , router 는 해결 ! 2. tailwind 적용 공식문서 라고 하면 뭔가..

하위 컴포넌트 변경하기 import {useState} from 'react'; export default function A() { const [value] = useState('아직 안바뀜'); return ( E 의 값을 바꾸기 ) } function B({ value }) { return ( 여긴 B ); } function C({ value }) { return ( 여긴 C ); } function D({ value }) { return ( 여긴 D ); } function E({ value }) { return ( 여긴 E {value} ); } A 에서 E 까지 쭉쭉 넘기고 넘기는 구조이다. 이렇게 {value} 값이 ‘아직 안바뀜’ 으로 잘 전달된걸 볼 수 있다. 이제 E의 값을 바꿀것이다..

💡 브라우저의 가로 창 사이즈가 변경됐을때 변경된 정도를 가져오는 훅을 만들 예정이다. import React from "react"; export default function useWindowWidth() { const [width,setEidth] = React.useState(window.innerWidth); // window.innerWidth : 현재 브라우저의 가로값 return width; } useWindowWidth.js import logo from './logo.svg'; import './App.css'; import useWindowWidth from './hooks/useWindowWidth'; function App() { const width = useWindowWidth..

함수 앞에 use 를 붙여 리액트에서 낚아서 슬 수 있도록 만든걸 react hooks 라고 부른다. 함수형 컴포넌트가 클래스형 컴포넌트같은 기능을 할 수 있게 해준다. useState class 컴포넌트로 state 를 활용해서 만들것이다. import React from 'react'; export default class Example1 extends React.Component { state = {count : 0}; render() { const {count} = this.state; // state 는 객체 return ( You clicked {count} times Click me ); } click = () => { this.setState({count: this.state.count +..

아무런 css 요소도 넣지 않은 버튼을 추가하면 그냥 회색의 밋밋한 버튼이 추가될것이다. 이걸 styled component 를 활용해서 꾸며보자. import logo from './logo.svg'; import './App.css'; import StyledButton from './components/StyledButton'; function App() { return ( 버튼 버튼 ); } export default App; 위처럼 버튼을 두가지 생성했는데, 하나는 props 로 primary 를 줬다. src 내부에 components 라는 폴더를생성하고 그 안에 StyledButton.jsx 로 컴포넌트를 생성한다.ㅍ import styled, {css} from 'styled-compone..

import logo from './logo.svg'; //import './App.css'; //import './App.scss'; import styles from "./App.module.css"; console.log(styles); // { // App: "App_App__A3szl" // App-logo: "App_App-logo__tm8C+" // App-logo-spin: "App_App-logo-spin__yh9Mn" // header: "App_header__M7J7p" // link: "App_link__3kObV" // logo:"App_logo__0lOZv" // } => styles 라는 객체 function App() { return ( Edit src/App.js and s..