본문 바로가기

전체 글

 (291)
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를 어떻게 구성할지 컴포넌트에게 요청..

티스토리툴바