React.js
[React.js] Kossie Coder - 5강. 폼에서 useState 사용하기
1. onChange 요소의 변화가 일어날 때 발생하는 이벤트 function App() { // username, password의 기본값이 ''로 고정되어 있기 때문에 input의 값을 바꾸려고 해도 바뀌지 않음. const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); return ( {/* input의 값을 바꾸기 위해 onChange 이벤트를 활용하여 setUsername, setPassword를 통해 useState 변수의 값을 갱신한다. */} setUsername(e.target.value)} /> setPassword(e.target.value)} /> ); } 2. onSubmit..
[React.js] Kossie Coder - 4강. 리액트 훅스 useState
1. Hook의 개요 Hook은 React 버전 16.8에 새로 추가되었습니다. Hook을 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. 2. useState useState는 화면의 상태 값을 바꿀 때 사용한다. // useState를 import 시켜야 한다. import React, {useState} from "react"; function App() { // text라는 변수를 setText 함수를 이용해 변화시킨다. // useState() 괄호안에 초기값을 설정할 수 있다. const [text, setText] = useState('Kossie'); const updateText = () => { // text라는 변수를 'Coder'로 변..
[React.js] Kossie Coder - 3강. 이벤트 핸들링 (onClick & onKeyUp)
1. onClick 클릭 시 발생하는 이벤트 function App() { const onSubmit = () => { alert('submitted'); }; return ( {/* onClick 등의 이벤트 핸들링의 중괄호에는 항상 함수가 들어가야 한다. */} {/* alert('hello')}>Submit */} Submit ); } 2. onKeyUp 키보드를 눌렀다가 뗐을 때 발생하는 이벤트 function App() { const onSubmit = () => { alert('submitted'); }; const onKeyUp = (event) => { if (event.keyCode === 13) { onSubmit(); } }; return ( Submit ); } 강의 링크 https..
[React.js] Kossie Coder - 2강. 폴더구조 & 컴포넌트 소개
1. render() // ReactDOM.render(element, container{, callback}); // element : component // container : /public/index.html에서 id가 root인 요소 ReactDOM.render( , document.getElementById('root') ); 2. Strict 모드 // StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. // Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다. // Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다. ... ... 3. JSX // React Comp..