All (147) 썸네일형 리스트형 prevState multiple states 하나의 컴포넌트는 하나 이상의 state를 가질 수 있다. 가지고 있는 state 중에 하나라도 값이 업데이트 되면, re-rendering이 발생한다. import { useState } from 'react'; const NewExpenseForm = (props) => { const [title, setTitle] = useState(''); const [amount, setAmount] = useState(''); const [date, setDate] = useState(''); const titleChangeHandler = (e) => { setTitle(e.target.value); }; const amountChangeHandler = (e) => { setA.. Event & useState Evnet how to add event listener? 바닐라 js에서 어플리케이션을 dynamic하게 만드는 가장 흔한 방법은 event listener를 등록하는 것이다. // Imperative Vanila JS const deleteBtn = document.querySelector('.delete'); deleteBtn.addEventListener('click', ()=>{ console.log('you clicked delete btn'); }) 그러나 리액트는 바닐라 자바스크립트의 명령형이 아니라, 선언형(declarative) 접근방식을 이용해서 코드를 작성한다. 그래서 이벤트를 등록할 때 위의 예제처럼 직접 DOM 요소를 조작하는 것이 아니라, 그 이벤트를 컴포넌트의 property.. JSX what is JSX? +) JSX, JSX in depth Javascript XML | jsx는 자바스크립트 코드 안에서 html 태그를 작성할 수 있게 해 준다. JSX는 자바스크립트 안에 속하는 개념으로, 자바스크립트를 html과 비슷한 문법으로 사용할 수 있게 만들어 주는 확장된 문법이다. React라는 라이브러리에서 jsx 문법을 순수 자바스크립트 코드로 변환해 주며, 최신 리액트 프로젝트에서는 import react 구문을 생략해도 jsx가 정상적으로 변환된다. import Expenses from './components/Expenses'; function App() { return ( Hello, world! ); } 일반적으로 컴포넌트를 만들 때 사용하는 방식이다. import Reac.. Component & Props how to make Component? 1. structure // components/ExpenseItem.js function ExpenseItem() { return expense item!; } export default ExpenseItem; // app.js import ExpenseItem from './components/ExpenseItem'; function App() { return ( ); } export default App; src/ components | 이 폴더 안에서 각 컴포넌트 별로 파일을 만들어서 작업한다. 이 때 App 컴포넌트는 일반적인 UI와는 다른 root 컴포넌트이기 때문에, components 폴더 안으로 이동시키지 않는다. 컴포넌트의 파일명 | 대문자로 시.. What is React? What is React? A JavaScript library for building user interfaces Javascript의 등장으로 DOM 요소를 조작할 수 있게 됨에 따라, 서버와 새로운 html을 주고 받는 통신 없이도 사용자에게 동적인 화면을 보여줄 수 있게 되었다. 이 덕분에 reactive web app과 SPA(single page app)라는 개념이 생겨났다. +) reactive web app | 사용자의 요청에 버벅거림이나 깜빡임 없이, 빠르게 반응하는 웹 어플리케이션 React는 이러한 js 기반의 어플리케이션을 쉽게 만들 수 있도록 도와주는 라이브러리(또는 light-weight framework)이다. 핵심적인 역할은, 개발자가 저수준(low level, vanilla.. Form form validation First name Looks good! // Example starter JavaScript for disabling form submissions if there are invalid fields (() => { 'use strict' const forms = document.querySelectorAll('.needs-validation'); // Loop over them and prevent submission Array.from(forms).forEach(form => { form.addEventListener('submit', event => { if (!form.checkValidity()) { event.preventDefault(); event.stopPro.. Alignment vertical alignment One of three columns One of three columns One of three columns row class를 가진 컴포넌트는 flex box로 지정되어있다. cross 축의 배치를 helper 클래스를 지정함으로써 설정할 수 있다. align-items-start | 기본값 align-items-center align-items-end horizontal alignment One of two columns One of two columns main 축의 배치를 결정할 수 있다. justify-content-start | 기본값 justify-content-end justify-content-center justify-content-around ju.. Grid system Container container | 클래스가 container인 요소들은 아래 표와 같이 break point에서 max-width 값을 조정함으로써 반응형 디자인을 구현한다. 부트스트랩의 Grid system은 컨테이너 안에서만 유효하다. container-fluid | 모든 break-points에서 max-width = 100%이다. Extra small row > col 구조를 사용해야 한다. row | display: flex가 적용되어있는 flex box이다. col | 1 row(12 col) 안에서 col의 너비를 정하지 않았을 때에는, 모든 col이 동일한 너비를 갖게된다. Responsive Grid System col-sm-8 col-sm-4 col-sm col-sm col-sm .. 이전 1 ··· 6 7 8 9 10 11 12 ··· 19 다음
