본문 바로가기

학원에서 배운 것85

KDT 5th 웹개발자 입문 수업 42일차 Redux 상태 관리 라이브러리 - 상태 관리가 필요한 다른 프레임워크에서도 사용 가능(jQuery, Vue.js, Angular.js ...) Redux의 개념을 각각의 프레임워크에 맞춘 라이브러리 사용 -> React-Redux 컴포넌트의 상태를 하나하나의 props 로 전달하면 힘들기에 이를 해결하기 위해 나온 라이브러리 즉, 컴포넌트의 상태를 각각 컴포넌트별 state 에 따라 관리하는 것이 아닌 하나의 store 라는 곳에서 관리한다. ✨ 상태 변화 값을 중첩된 컴포넌트 수 만큼 Props 로 전달하는 방식이 아니라 Store 에서 한번에 꺼내서 사용하는 편리함을 제공한다. Redux 의 기본 개념 Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다 (스토어라.. 2023. 4. 4.
KDT 5th 웹개발자 입문 수업 41일차 Global Style 적용하기 Styled Component 로 컴포넌트 단위에 스타일을 적용하고 리액트 App 전체에 특정 폰트를 적용하거나 공통 스타일을 적용하고 싶을 때 Global Style 을 사용해준다. 이는 styled components 의 createGlobalStyle() 함수를 사용하면 가능한데, 이 함수를 사용하여 전역 스타일 컴포넌트를 만들어 최상위 컴포넌트로 추가해주면 모든 컴포넌트에 공통 스타일이 적용된다. 구글 폰트에서 받아준 폰트의 link 부분을 index.html 에 추가 기본적으로 리액트는 SPA 이므로 index.html 하나만 존재한다. 전역 스타일 지정하기 위한 jsx 파일 만들어주기 가장 먼저 styled-components 의 함수를 import 해준다. .. 2023. 4. 3.
KDT 5th 웹개발자 입문 수업 40일차 간단하게 백엔드 서버 구축해서 데이터를 프론트에 보내기 터미널 2개에 백엔드 서버와 리액트를 둘다 돌려준다. const express = require('express'); const cors = require('cors'); const server = express(); const PORT = 4000; server.use(cors()); server.get('/', (req, res) => { const pororoObjArr = [ { name: '뽀로로', age: '5', nickName: '사고뭉치', }, { name: '루피', age: '4', nickName: '공주님', }, { name: '크롱이', age: '5', nickName: '장난꾸러기', }, ]; res.send(JS.. 2023. 3. 31.
KDT 5th 웹개발자 입문 수업 39일차 조건부 렌더링 컴포넌트를 상황에 따라 켜고 끄려면 -> 조건부 렌더링이 필요 원래 js, html 에서는 display 속성을 none 으로 처리해줬지만 리액트는 jsx 문법을 사용하므로 if 문/3항 연산자/논리 연산자와 html 태그를 같이 사용해주면 되므로 display 속성을 처리할 필요가 없다. export default function CoditionalState() { const [isVisible, setIsVisible] = useState(false); const toggle = () => { setIsVisible(!isVisible); }; return ( {isVisible ? 'Off' : 'On'} {isVisible && } ); } && 연산자를 사용하면 display 속성.. 2023. 3. 30.

티스토리툴바