쭈링이.log 쭈링이.log

React input React JSX 에서 input태그를 html태그처럼 사용할 수 있다. // html input 태그와 조금 다르게 닫는 태그도 설정 // 또는 JSX 에서 input 태그 사용하는 다른점은 닫는 태그를 사용해야 한다. 값을 입력할 때 마다 input 을 제어하려면 onChange 이벤트핸들러를 사용해 제어할 수 있다. /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let postId = 'postId'; let [title, setTitle] = useState(['Title1', 'Title2', 'Titl..

React props React props 를 사용하여 하위컴포넌트의 html 을 동적으로 변경가능 하도록 할 수 있다. /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let postId = 'postId'; let [title, setTitle] = useState(['Title1', 'Title2', 'Title3']); let [blogTItle, setBlogTitle] = useState('ReactBlog'); let [like, changeLike] = useState([0, 0, 0]); let [modal, setMo..

React props React props 란 properties의 약자로 상위(부모) 컴포넌트가 하위(자식) 컴포넌트에게 값을 전달할때 사용하는 속성이다. props는 상위 컴포넌트가 props를 사용하여 값을 수정할 수 있지만 자식 컴포넌트에서는 값을 읽기만 가능하기때문에 props는 단방향 데이터 흐름을 갖는다. prop의 선언방법은 이러하다. // 상위(부모) 컴포넌트 // 하위(자식) 컴포넌트 function 자식컴포넌트(props) { return ( props.상위컴포넌트에서 작명한 이름 ); } // App.js /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 're..

React Component component를 반복적으로 html에 선언해야 할 때는 map을 사용하여 반복적으로 component를 불러 올 수 있다. // App.js /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let post = 'Restaurant'; let postId = 'postId'; let [title, setTitle] = useState(['Title1', 'Title2', 'Title3']); let [blogTItle, setBlogTitle] = useState('ReactBlog'); let [like..

React Component component를 동적으로 처리하려면 useState를 사용하여 component를 제어할 수 있다. /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let post = 'Restaurant'; let postId = 'postId'; let [title, setTitle] = useState(['Title1', 'Title2', 'Title3']); let [blogTItle, setBlogTitle] = useState('ReactBlog'); let [like, changeLike] = useStat..

React Component React Component 란 UI를 재사용 할 수 있도록 개별적으로 여러 조각으로 나누는 단위이다. component를 함수로 생성해서 사용할 수 있다. /* App.css */ .modal { margin-top: 20px; padding: 20px; background: #eee; text-align: left; } // App.js /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; // App() 또한 컴포넌트이다. function App() { let post = 'Restaurant'; let postId = 'postId';..

React useState useState에서 배열 또는 오브젝트 값을 변경할땐 배열의 값을 바꾼다고 값이 변경되지 않는다. /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let post = 'Restaurant'; let postId = 'postId'; let [title, setTitle] = useState(['Title1', 'Title2', 'Title3']); let [blogTItle, setBlogTitle] = useState('ReactBlog'); let [like, changeLike] = useState(0)..

React useState useState의 값을 변경하기위해선 등호( = )를 사용해서 변경 하는것보다 useState의 두번째변수인 상태값 갱신 함수를 사용하여 값을 변경해야 HTML에 재랜더링이 적용되어 변경된 값이 반영이 된다. App.js /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let post = 'Restaurant'; let postId = 'postId'; let [title, setTitle] = useState(['Title1', 'Title2', 'Title3']); let [blogTItle, setBlo..