react
-
[React] Footer UI 제작카테고리 없음 2023. 7. 18. 14:37
📌 footer UI styled component로 Footer 만들기 Footer.ts import React from 'react'; import styled from 'styled-components'; import { Link } from 'react-router-dom'; const FooterContainer = styled.footer` background-color: var(--white-deepdark); width: 100%; height: 180px; bottom: 0; padding: 20px; display: flex; align-items: center; justify-content: center; @media ${props => props.theme.breakpoints.mo..
-
[React] custom component/ Styled-ComponentcodeStates front-end/React 2023. 2. 20. 16:43
HTML 삽입 미리보기할 수 없는 소스 📌 custom component 📍 Component-Driven Development(CDD) 부품 단위로 UI 컴포넌트를 만들어나가는 개발 🔗 실제로 CDD 방법을 활용하여 UI를 구축하는 사이트 - 링크1 : BBC - 링크2 : UN Storybook uikit.wfp.org 📍 구조적인 CSS 프로젝트 규모나 복잡도, 다양한 디바이스들의 등장으로 일괄된 CSS패턴이 없다는 것이 문제점으로 떠올라 이를 해결하기 위해 CSS 전처리기(CSS Preprocessor)라는 개념이 등장 이는 CSS가 구조적으로 작성될 수 있게 도움을 주는 도구이다 🔗 SASS(Syntactically Awesome Style Sheets) CSS를 확장해 주는 스크립팅 언어 특정..
-
[React] 데이터 흐름codeStates front-end/React 2023. 2. 2. 16:23
📌리액트 데이터 흐름 📍단방향 데이터 흐름( one-way data flow ) React는 페이지 단위가 x -> 컴포넌트 단위 컴포넌트를 만들고 -> 페이지를 조립 (상향식(bottom-up)으로 컴포넌트 구조를 짠다) 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 전달인자 혹은 속성처럼 전달 받음 데이터를 전달하는 주체 : 부모 컴포넌트 -? 데이터 흐름이 하향식(top-down) 이를 단방향 데이터 흐름이라고 한다 💡 props와 state의 설명 이해하기 [React] State & Props & 렌더링 정의 📌리액트 개념 📍State & Props State : 살면서 변할 수 있는 값(상태) 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 Props : 성별이나 이름처..
-
[React] State & Props & 렌더링 정의codeStates front-end/React 2023. 1. 25. 23:11
📌리액트 개념 📍State & Props State : 살면서 변할 수 있는 값(상태) 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 Props : 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값 ex) 어떤것이 Props 또는 State에 적합할까? 이름 성별 나이 현재 사는 곳 취업 여부 결혼/연애 여부 정답 : Props - 이름, 성별 State - 성별, 나이, 이름, 현재 사는 곳, 취업 여부, 결혼/연애 여부 props의 특징 컴포넌트 속성(property) 웹어플리케이션에서 해당 컴포넌트가 가진 속성에 해당 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값 객체 형태 읽기 전용이다 -> 함부로 변경될 수..
-
[React] 실습 - react twittler SPAcodeStates front-end/React 2023. 1. 25. 20:25
📌 react twittler SPA 📖 학습 목표 React Router 설치 react-router-dom 을 npm으로 설치해야 합니다. 상세 컴포넌트 구현하기 App 루트 컴포넌트(App.js) import 를 이용하여 Tweets, MyPage, About 컴포넌트를 불러옵니다. Sidebar 메뉴 컴포넌트(Sidebar.js) Font Awesome을 활용하여 About 아이콘 을 넣어야 합니다. Font Awesome을 활용하여 MyPage 아이콘 을 넣어야 합니다. Tweets 컴포넌트(Tweets.js) import 를 이용하여 Footer 컴포넌트를 연결합니다. dummyTweets의 길이만큼 트윗이 보여야 합니다 MyPage 컴포넌트(MyPage.js) import 를 이용하여 Foo..
-
[React] SPA, RoutercodeStates front-end/React 2023. 1. 25. 15:56
📌리액트 개념 📍SPA( Single-Page Application ) 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지에 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트 전통적인 웹사이트 - 페이지를 이동 시 "페이지 전체"를 불러와야함 SPA - 페이지 이동 시 중복 되는 부분은 불러 오지 x 중복 되는 헤더, 푸터는 냅두고, 컨텐트만 바꾼다는 뜻 SPA 장점 페이지 전체를 런데링 하는 것이 아니므로 사용자의 행동에 빠르게 반응 SPA 단점 첫 화면의 로딩 시간이 길어짐 검색 엔진(자료를 수집하기 좋도록 웹 페이지를 구성하는 것) 최적화가 좋지 않음 🧷 Wireframe과 Mockup Wireframe - 웹페이지의..
-
[React] JSX, ComponentcodeStates front-end/React 2023. 1. 20. 15:16
📌리액트 기초 개념 📍JSX JavaScript를 확장한 문법 React에서는 DOM과는 다르게 css,jsx 문법만을 가지고 웹 애플리케이션을 개발할 수 있다. DOM에서 JS와 함께 사용하기 위해서는 js와 html을 연결하기 위한 작업이 필요 Inline 방식이나 script 태그를 이용해 외부 js 파일을 연결 가능 🔖 jsx를 써야하는 이유 명시적 코드 작성 : js 문법과 html 문법을 동시에 이용해 기능 구조를 한눈에 확인 가능 코드단순화, 가독성 import React from "react"; import "./styles.css"; function App() { const user = { firstName: "React", lastName: "JSX Activity" }; functio..