본문 바로가기

분류 전체보기

 (291)
Hooks - useState Hooks - useState 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 갖게 함 카운터, Todolist const [state, setState] = useState(초기값); 배열을 구조분해 할당으로 꺼내놓음. 함수형 업데이트 App.jsx import { useState } from 'react'; import './App.css'; function App() { const [number, setNumber] = useState(0); return ( Number State : {number} { // 기존 업데이트 방법 // setNumber(number + 1); // 함수형 업데이트 setNumber((curNum)=>{ return curNum + 1; }) }} > 누..
숙련주차, GlobalStyles, Sass 숙련주차, GlobalStyles, Sass GlobalStyles(전역 스타일링) 프로젝트 전체를 아우르는 스타일! cf. styled-components : 해당 컴포넌트 내에서만! App.jsx import './App.css'; import styled from "styled-components"; import TestPage from './components/TestPage'; const StContainer = styled.div` display: flex; ` const StBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; margin: 20px; background-..
숙련주차, Styled Components ,Css-in-JS 숙련주차, Styled Components, Css-in-JS JS code → CSS 코드 컴포넌트를 꾸미는 방식 styled-components 패키지 설치 $ yarn add styled-components App.js import './App.css'; import styled from "styled-components"; const StContainer = styled.div` display: flex; ` const StBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; margin: 20px; background-color: ${(props) => props.backgr..
반복되는 Component 처리하기 반복되는 Component 처리하기 컴포넌트 중복 map함수로 빼기 map 함수란? 원래 데이터를 가공하여 출력하는 방법 import logo from './logo.svg'; import './App.css'; function App() { const testArr = ['감자', '고구마', '오이', '가지', '옥수수']; return ( { testArr.map(function(item) { return {item} }) } ); } export default App; filer 함수 testArr = [1, 2, 3] testArr.filter((item) => { return item > 3 }) // [1, 2] App.js import React from 'react'; import '...
Styling Styling App.js import logo from './logo.svg'; import './App.css'; function App() { const style = { padding : "100px", display: "flex", // 수평 gap: "10px", // 간격 }; const squareStyle = { width: "100px", height: "100px", border: "1px solid green", borderRadius: "10px", display: "flex", alignItems: "center", justifyContent: "center", }; return ( 감자 고구마 오이 가지 옥수수 ); } export default App; 공통 객체 square..
실습 - 카운트 앱 실습 - 카운트 앱 내가 짠 코드 App.jsx import {useState} from 'react'; function App() { const [num, setNum] = useState(0); return ( {num} { // num += 1 setNum(num+1) }} > +1 { // num -= 1 setNum(num-1) }} > -1 ) } export default App; num = num - 1 안되는 이유 num을 바꿀 수 있는 유일한 방법은 setNum!!! 값은 바뀌지만, 반영이 안된다. React 프로젝트 내에 num을 바꿀 수 있는 방법으로 바꿔야한다! 다른 방법 { newNum = num + 1 setNum(newNum) }} >
Component & Rendering Component & Rendering Component 리액트의 핵심 빌딩 블록 중 하나로, 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조작으로 구성. UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체 JSX를 통해 선언하면 이를 리액트가 화면에 그려줌. 컴포넌트기반 개발 이전에는 UI를 표현하기 위해 직접 DOM객체를 조작(querySelector, 클래스(id)를 찾음)하는 명령형 프로그래밍으로 일일히 코드로 작성해줬음. React 리액트는 선언형 프로그래밍 방식으로 화면에 어떻게 그려야 할지는 React 내부에 잘 숨겨져 추상화 되어 있음. Rendering 컴포넌트가 현재 props와 state 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청..
State State 컴포넌트 내부에서 바뀔 수 있는 값 UI를 바꾸기 위해서 사용. 리액트에서 변경되야 하는 값은 반드시 State로 선언해야 함. App.jsx import {useState} from 'react'; import "./App.css"; function App() { const [name, setName] = useState('김할아버지'); return ( {name} 클릭 ); } export default App; App.jsx import {useState} from 'react'; import "./App.css"; function App() { const [fruit, setFruit] = useState(""); return ( 과일 : {fruit} ); } export defau..
JSX, Props 📌 JSX Javascript + XML JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그림 객체를 변수로 빼 재사용성 가능 import React from 'react' export default function App() { const number = 1; const pTagStyle = { color: "red", } return( 안녕하세요 리액트입니다. {/* 주석을 사용하는 방법입니다. */} {/* 삼항 연산자를 사용해볼게요! */} { number > 10 ? number + '은 10보다 크다' : number + '은 10보다 작다.' } ) } 📌 Props 부모에서 자식으로 값을 내려줌(rendering) , 단방향 props는 반드시 읽기 전용으로 취급하며..
React Component React Component UI를 재사용이 가능한 개별적인 여러 조각으로 나눔 📌 함수형 컴포넌트 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) function Welcome(props) { return Hello, {props.name}; } // 훨씬 쉬운 표현을 해보면 아래와 같죠. function App () { return hello } 📌클래스형 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 📌 JSX 자바스크립트의 확장 문법이며 XML과 비슷 📌 { } 자바스크립트 표현식을 JSX 내부에 작성하려면 {}로..

티스토리툴바