component가 많아지면 다양한 파일에 분리가 되어있으면, css 작성 고민이 많아진다. 한곳에 css를 다 모아놓으면, 중복 문제도 발생하게 된다. 이를 해결하기 위해 class선언 없이 컴포넌트에 css를 직접 장착하는 것을 styled-components(=CSS in JS)라고 한다. styled-components 설치 yarn add styled-components npm install styled-components styled-components 사용하기 Detail.js import styled from 'styled-components' let 박스 = styled.div` padding : 20px; `; function Detail(){ return ( ) } 박스라는 컴포넌트를..

routing : 설치 라우팅 ? 페이지를 여러개 만드는것 라우팅은 react-router-dom 라이브러리 이용해야한다 yarn add react-router-dom@5 npm install react-router-dom@5 @5를 붙여야한다! index.js 셋팅 이 파일은 App.js에 있는 컴포넌트를 index.html에 꽂아주세요~ 뭐 이런 작업을 시키는 파일이다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import {BrowserRouter} from 'r..

yarn을 이용한 새로운 프로젝트 설치 yarn이란? npm이나 npx를 대체해서 이용할 수 있게 도와주는 라이브러리로 npm보다 속도와 안정성을 자랑한다. npx create-react-app 실행 시 자동으로 yarn이 구동되어 빨라진다. npm install ~ 보다 yarn add ~ 라고 사용하시면 더 빠르게 설치할 수 있으며, npm run start를 yarn start로 대체할 수 있다. React Bootstrap 라이브러리 설치하기 https://react-bootstrap.github.io/ npm install react-bootstrap bootstrap yarn add react-bootstrap bootstrap 둘중에 하나를 골라 설치해주면 된다. 특정 스타일을 사용할 때는 ..

오늘의 포스팅은 리액트의 옛날 문법 배우기이다. 예전 버전 리액트의 문서들은 어렵게 표현되어있다. 이 문법을 배우는 이유는 리액트를 다룰 때 자주 사용했던 코드들은 대부분 class를 이용한 컴포넌트를 사용했다. class Profile extends React.Component{ constructor(){ super(); } render(){ return ( 프로필입니다. ) } } 위 코드는 컴포넌트를 만드는 기본 문법이다. 컴포넌트를 사용하는 방법은 로 동일하다. 클래스란 ❓ 변수와 함수 보관의 덩어리를 의미한다. extend란 ❓ react의 성질을 물려받아서 이런 클래스를 만들어주겠다! 라는 의미이다. 이때 세부설정이 필요한데, state는 constructor함수 안에 supter을 써주고 그..

이번 시간에는 글 발행 기능을 추가해볼 것이다! 글을 입력 하고 저장버튼을 누르면 상단에 발행된 글이 뜨게 된다. 대신 영구 저장은 못한다! 왜냐면 서버와 DB가 없으니까 간단하게 자바스크립트 변수, state로 저장하는 기능을 만들어 볼 것이다. 🤔 내가 짠 코드 function TextEnroll(text) { var newArray = [...글제목]; newArray.unshift(text); 글제목변경(newArray); } let [글제목, 글제목변경] = useState([ "난곡 돈까스 맛집! 오츠카도", "신대방 온정 돈가스 너무 매워", "강남 토끼정, 맛집이다 ", ]); let [inputText, changeText] = useState(null); { TextEnroll("추가는..

map() 함수 반복문이란? 어떤 코드를 반복하고 싶을 때 사용! 리액트는 html도 반복문으로 반복시킬 수 있음! 하지만 JSX 중괄호 내에 for은 넣지 못한다. 그럼 어떻게 할까❓ map이라는 함수 활용하자! *map함수란? array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을때 .map( ) 사용 만약 array 내에 모두 2를 곱해주고 싶다면❓ var array = [2,3,4]; var newArray = array.map(function(a){ return a * 2 }); array안에 있는 하나하나의 값들이 꺼내져서 2가 곱해진다. a라는 파라미터는 array안에 하나하나의 데이터를 의미! newArray = [4,6,8] 이 된다! { 반복할데이터.map(()=>{ return }..

오늘 배울 내용!? 모달창으로 상세페이지 띄우기 주의 할 점!🚨 리턴 ( 소괄호 ) 안에 div를 여러개 사용할 수 없다. return 안에는 항상 하나의 html 태그가 시작하고 끝나야 한다. → 이런 형태 불가능! (큰 div 안에 넣으면 가능해짐!) html이 많아지고 복잡해지면 보기 싫어진다. 이럴때 사용하는 리액트 문법은 html 태그를 간편하게, 한 단어로 줄여서 쓸 수 있는 문법은 컴포넌트 문법이다! 장점 ? 이해가 쉽고 깔끔하게 정리가 가능하다. 컴포넌트 안에 또다른 컴포넌트를 만들 수 있다. 즉 관리가 편하다. 아래처럼 복잡한 코드보단 위처럼 짧은 코드로 가능! 그렇다면 컴포넌트는 어떻게 만들까❓ function Modal(){ //이름 짓고 return ( //원하는 html 담고 ) ..

양방형 바인딩을 통해 뷰와 모델의 값을 변경시켜주는데 이런 변화는 복잡한 기능이다. 예를들어 특정 이벤트가 발생했을때 모델의 변화를 일으키고 변화를 일으킴에 따라 어떤 돔을 가져와서 어떠한 방식으로 뷰를 업데이트 해줄 지 로직을 정해줘야하는데 이런 로직은 프레임워크나 라이브러리에서 정해준다. 리액트는 변화가 생기면 그냥 mutation 하지 말고 그냥 데이터가 바뀌면 기존 뷰를 날려버리고 새로 만들어 버리면 어떨까 ? 하는 생각을 가지고 리액트가 개발되었다. 하지만 브라우저는 dom 기반으로 작동 하기때문에 페이지가 새로운 view를 만들어 버리려면 성능적으로 문제가 발생한다. 그래서 존재하는 것이 Virtual Dom 이다. 이는 가상의 돔으로 변화가 일어나면 실제로 브라우저 돔에 새로운것을 넣는 것이..