css의 오염을 막을 수 있다. =>대규모 어플리케이션 프로젝트의 경우에는 CSS파일의 부피가 커지고, 복잡해질 수 있다. moulde.css 이런식으로 짜지 않아도 컴포넌트 내에서 쓰이기때문에 관리가 용이해짐 div투성이의 코드를 짜지않을 수 있게 됀다. function App() { return ( Log in Hello */} ); } 이런식으로 코드가이뻐짐 SSR 서버사이드렌더링 Styled-components 는 서버 사이드 렌더링을 지원합니다. 기본 아이디어는 서버에서 앱을 렌더링 할 때마다 ServerStyleSheet 컨텍스트 API를 통해 스타일을 허용하는 공급자를 생성하고 반응 트리에 추가 할 수 있다는 것입니다. 이것은 키 프레임과 같은 전역 스타일을 방해하지 않으며 createGlo..

1.store에 저장된 state가 array, object 자료인 경우 state 변경을 좀 쉽게 편리하게 할 수 있는데 state변경함수에 파라미터 뚫는법 let user = createSlice({ name : 'user', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ return {name : 'park', age : 20} } } }) let user = createSlice({ name : 'user', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ state.name = 'park' } } }) 근데 state를 직접 수정하..

Redux 쓰면 뭐가 좋냐면 Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리입니다. 이거 설치하면 js 파일 하나에 state들을 보관할 수 있는데 그걸 모든 컴포넌트가 직접 꺼내쓸 수 있습니다. 그래서 귀찮은 props 전송이 필요없어집니다. 컴포넌트가 많아질 수록 좋을듯. 그래서 사이트가 커지면 쓸 수 밖에 없어서 개발자 구인시에도 redux같은 라이브러리 숙련도를 대부분 요구합니다. Redux 셋팅은 1.state보관하는통만들기 import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) 2.index.js import { Provider } from "re..

html을 서버가 만들면 server-side rendering 1. DB에서 데이터 뽑아서 2. 글목록.html 파일에 꽂아넣고 3. 그 html 파일을 서버에서 보내주는 것임 html을 리액트가 만들면 client-side rendering 1. 리액트가 서버에 GET요청으로 DB데이터를 가져와서 2. 그걸 html로 만들어서 보여주는 것임 리액트를 쓰는 경우 보통 client-side rendering을 합니다. 1.DB에 있는 상품목록을 가져와서 리액트에서 보여주고 싶으면 1. 서버는 누군가 /product로 GET요청을 하면 DB에서 데이터 꺼내서 보내주라고 API를 짜놓습니다. 2. 리액트는 상품목록을 보여주고 싶을 때 서버 /product 주소로 GET요청 날리면 됩니다. 3. 그럼 데이터 ..

컴포넌트의 인생 컴포넌트는 1. 생성이 될 수도 있고 (전문용어로 mount) 2. 재렌더링이 될 수도 있고 (전문용어로 update) 3. 삭제가 될 수도 있습니다. (전문용어로 unmount) 인생에 간섭하는 방법 "Detail 컴포넌트 등장 전에 이것좀 해줘" "Detail 컴포넌트 사라지기 전에 이것좀 해줘" "Detail 컴포넌트 업데이트 되고나서 이것좀 해줘" 이렇게 코드좀 실행해달라고 간섭할 수 있는데 간섭은 갈고리를 달아서 합니다. useEffect 안에 있는코드는 html 렌더링 후에 동작합니다. 좀 오래걸리는 코드는 렌더링후에 작동하게하면 좀더 효율적으로 동작하지않을까요? 즉 1.어려운연산 2.서버에서 데이터가져오는 작업 3.타이머 장착하기 왜 이름이 Effect임? Side Effec..

페이지 나누는법(리액트 미사용) 1.html 파일 만들어서 상세페이지내용 채움 2.누가/ detail로 접속하면 html 파일보내줌 리액트는 싱글페이지 어플리케이션이라고해서 하나밖에 안보여줌 리액트사용 1.컴포넌트 만들어서 상세페이지내용 채움 2.누가 /detail 접속하면 그 컴포넌트 보여줌 이런거 react-roter-dom 라이브러리 쓰면 쉽게 짤 수 있음 1.루팅하기 1.Routes,Route 만들기 //detail 컴포넌트에서 여러개의 페이지를 각각 보여주고 싶다면 파라미터문법을 사용하자 2.nested route를 이용해 안에 있는 내용보여주기 위에보면 이런 녀석들이 있는데 events 페이지를 들어가서 여러 유사한페이지를 만들고 싶을때 쓴다. 사용하기 위해서는 이라는 녀석을 사용하여 구멍을 ..