본문 바로가기

코딩65

리액트 숙련(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.
리액트 입문(추가 및 삭제 기능) 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.
리액트 입문반(카운터 앱) import React, { useState } from 'react' function App() { const [count, setCount] = useState(0) return ( {count} { setCount(count + 1) }}>+ 1 { setCount(count - 1) }}>- 1 ) } export default App + 1 버튼을 누르면 또는 - 1 버튼을 누르면 렌더링이 되어 새로고침 없이 바로 숫자가 올라가거나 내려가는 코드이다. const [count, setCount] = useState(0) 을 통해 count의 초기값을 0으로 맞춰줬고, {count}을 사용해 현재 count를 렌더링했다. + 1 버튼과 - 1 버튼을 각각 만들어서 onClick 이벤트와 화살표 함수.. 2023. 4. 14.

티스토리툴바