Jade_o.o

state 란? React에서 앱의 유동적인 데이터를 다루기 위한 개체 • 계속해서 변하는 특정 상태 • 상태에 따라 다른 동작을 함 • 왜 사용할까? • State가 변경될시 자동으로 재랜더링 되기 때문 • 이 점이 변수와 다른 점 • 말이 조금 어렵지만, ‘상태를 바꿀 수 있는 변수’ state vs. props • props: 부모 컴포넌트에서 자식 컴포넌트에 데이터 전달 시 사용 (읽기모드) => React는 단방향 데이터 흐름! • state: 특정 컴포넌트가 갖는 상태 (값) => 컴포넌트 내부에서 선언되고 내부에서 값을 변경함! 클래스형 컴포넌트의 state • 기존 형태 import React, { Component } from "react"; class ClassState extends ..

props • 부모가 되는 컴포넌트에서 자식 컴포넌트에게 보내는 데이터 • 상위 → 하위로만 데이터 전송, 그 반대로는 보낼 수 없음 • 여러 번 쓰이는 컴포넌트에서 내부 데이터만 다르게 사용하고 싶을 때 사용 • 다양한 데이터를 props 라는 객체로 받아서 사용 props란? properties 를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소 • props는 컴포넌트끼리 값을 전달하는 수단 • 상위 컴포넌트에서 하위 컴포넌트로 전달 (단방향 데이터 흐름) props 사용 방법 (함수형 컴포넌트) • 부모 컴포넌트에서 전달한 props는 함수형 컴포넌트에서 함수의 파라미터로 전달받으며, JSX 내부에서 { } 기호로 감싸서 사용한다 => 부모 컴포넌트에서 name props 전달 const ..

App.js import {PracticeJSX,PracticeJSX2,PracticeJSX3,PracticeJSX4} from './PracticeJSX'; function App() { return ( ); } export default App; PracticeJSX.js : 실습1_name과 animal이라는 변수를 선언 // JSX 실습 // 함수형 컴포넌트로 진행 export function PracticeJSX() { /* 실습1_name과 animal이라는 변수를 선언 */ let name = "백금"; let animal = "강아지"; return( 제가 반려{animal}를 키운다면 이름은 {name}으로 지어줄거예요 제 반려 동물의 이름은 {name}입니다. {name}이는 {anim..

App.js import './App.css'; import UseJSX from './UseJSX'; function App() { return ( JSX 문법을 배워봐요! ); } export default App; UseJSX.js ver.1 import ClassComp from "./ClassComp"; export default function UseJSX() { // 1. 인라인 스타일 적용 const divStyle = { width: "100px", height: "100px", backgroundColor: "gray", textAlign: "center", color: "white", marginTop: ".5rem", display: "inline-block", border: "1p..