[React 입문] 컴포넌트 안에 <input>태그 함수 호출 안 되는 오류

// rfce import React, { useState } from 'react'; import './App.css'; function App() { const [name, setName] = useState(''); const [age, setAge] = useState(''); const nameChangeHandler = (event) => { setName(event.target.value); }; return ( nameChangeHandler(event)} /> ); } export default App; ★ 중요 포인트 ★ 태그에서 onChange를 {} event를 매개변수로 받는 함수를 넣는 경우, * onChange = {nameChangeHandler(event)} => 이렇게 작..

• format_list_bulleted React
• · 2023. 11. 2.
• textsms

[React 입문] Styling + 반복되는 구간 컴포넌트 처리

// rfce import React, { useState } from 'react'; import Layout from 'Layout'; const divStyle = { display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '10px', border: '1px solid green', width: '100px', height: '100px', }; function App() { return ( 감자 고구마 오이 가지 옥수수 ); } export default App; * Style을 객체로 넣고 자바스크립트로 표현하는 거라 {{}} 이렇게 표현함. * html의 class를 사용할때는 JSX에서는 className..

• format_list_bulleted React
• · 2023. 11. 2.
• textsms

#03 리액트 입문 :: 카운터 앱 만들기

[내가 생각한 코드] const [value, upValue] = useState(0); * value값을 변경할 수 있는 유일한 방법 upValue 임 ★개선점 : value를 {value}로 넣으려고 했음. * 콘솔로 찍어보니 자바스크립트 표현하는 {}를 섞어서 생각하고 있었음...

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 2.
• textsms

[React 입문] Props Children

1. props children 사용 ( props의 주요개념 ) - 부모 컴포넌트에서 자식 컴포넌트로 props 해서 값 전달하듯이 -자식컴포넌트를 태그로 열고 닫으면 children으로 인식 됨 import React from 'react'; function User(props){ console.log(props); //{children: 헤헤} return {props.children}; //헤헤 } function App(){ return ( 헤헤 ; ); } export default App; 2. children의 용도 & 렌더링 방법 - 용도 : 항상 나와야하는 부분이라면 (머릿글 같은) 그 밑에 children을 받아서 사용하기

• format_list_bulleted React
• · 2023. 11. 1.
• textsms

[React 입문] Props의 개요

1. props 개념 - 컴포넌트 간의 정보 교류 방법 - 부모 컴포넌트에서 자식에게 넘겨준 데이터들의 묶음 (객체) 2, props를 통해 부모->자식으로 값 전달 - ★부모에서 자식으로만 가능 ★ - ★읽기전용 + 변경 불가능 ★ 3 자식 컴포넌트에서 부모에게 받은 값 렌더링 가능 import React from 'react'; function App(){ function Child(props){ return {props.grandFatherName} //"엄마" } function Mother(props){ return ; // props로 name전달함 } function GrandFather(){ const papaName ="홍길동"; return ; // props로 name전달함 } ret..

• format_list_bulleted React
• · 2023. 11. 1.
• textsms