본문 바로가기

전체 글85

리액트 숙련(Styled Components - GlobalStyles, Sass) 프로젝트를 아우르는, 공통적으로 들어가야 할 스타일을 적용해야 할때 ‘전역적으로(globally)’ 스타일을 지정한다. 라고 표현한다. 그럴 때 적용하는 방법이 바로 전역 스타일링이다 import styled from "styled-components"; function TestPage(props) { return ( {props.title} {props.contents} ); } const Title = styled.h1` font-family: "Helvetica", "Arial", sans-serif; line-height: 1.5; font-size: 1.5rem; margin: 0; margin-bottom: 8px; `; const Contents = styled.p` margin: 0; fo.. 2023. 4. 17.
리액트 숙련(Styled Components) # CSS-in-Js란? CSS-in-JS방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다. 순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것이다. yarn add styled-components 이 방식을 사용하기 위해서는 styled-components 플러그인 설치가 필요하다. 확장에서 styled-components 설치를 한 후 위 명령어를 터미널에서 실행해주면 준비 끝 // src/App.js import React from "react"; // styled-components에서 styled 라는 키워드를 import 합니다. import styled from "styled-components"; // styled.. 2023. 4. 17.
WIL(20230410 ~ 20230416) Virtual DOM, props, state DOM DOM은 HTML 문서를 객체로 표현한 것이다. DOM은 HTML 문서를 트리 구조로 표현하며, 각각의 노드는 객체이다. DOM은 HTML 문서의 구조를 표현하고, CSS를 통해 스타일을 지정하고, JavaScript를 통해 동적으로 문서를 조작할 수 있다. Virtual DOM Virtual DOM은 DOM의 추상화된 개념으로, 실제 DOM에 접근하지 않고 메모리 상에서 빠르게 업데이트를 처리할 수 있다. Virtual DOM은 DOM의 상태를 가지고 있으며, 이를 통해 DOM의 변경 사항을 추적할 수 있다. 그리고 실제 DOM에 접근하지 않기 때문에 빠르게 업데이트를 처리할 수 있다. props란? props란 Component에서 Component로 전달하는 데이터를 말한다. props를 사.. 2023. 4. 17.
리액트 입문(추가 및 삭제 기능) import React, { useState } from 'react'; import './App.css'; function App() { const [users, setUsers] = useState([ { id: 1, age: 30, name: '송중기' }, { id: 2, age: 24, name: '송강' }, { id: 3, age: 21, name: '김유정' }, { id: 4, age: 29, name: '구교환' } ]) const [name, setName] = useState('') const [age, setAge] = useState('') const nameChangeHandler = (event) => { setName(event.target.value) } const age.. 2023. 4. 15.

티스토리툴바