Step by Step

#5장 ref:DOM에 이름 달기 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아 작업이 쉽다. HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. const root = ReactDOM.createRoot(dovument.getElementById('root')); 5.1 ref는 어떤 상황에서 사용해야 할까? 'DOM을 꼭 직접적으로 건드려야 할 때' * 리액트 컴포넌트에서 state 사용 ValidSample 컴포넌트 만들기 => input에 ref 달기 => 버튼을 누를 때마다 input에 포커스 주기 5.1.1 예제 컴포넌트 생성 import { Component ..

#4장 이벤트 핸들링 4.1.1 이벤트를 사용할 떄 주의 사항 1. 이벤트 이름은 카멜 표시법으로 작성(onclick->onClick) 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 3. DOM요소에만 이벤트를 설정 가능(div,button,input,form)에는 가능, 직접 만든 컴포넌트에는 불가능 4.1.2 이벤트 종류 Clipboard, Touch, Composition, UI, Keyboard Wheel, Focus, Media, Form, Image, Mouse, Animation Selection, Transition 4.2 예제로 이벤트 핸들링 익히기 컴포넌트 생성 및 불러오기 onChange 이벤트 핸들링하기 임의 메서드 만들기 input 여러 개..

#3장 3.1 클래스형 컴포넌트 컴포넌트 기본 컴포넌트 Todo Template, TodoInput, TodoList, TodoItem 컴포넌트를 선언하는 방식은 두 가지이다. 함수 컴포넌트, 클래스형 컴포넌트 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능 사용이 가능, 임의 메서드 정의가능 3.2 첫 컴포넌트 생성 class App extends Component{ render(){ const name = 'react'; return {name} } } 클래스형 컴포넌트에서는 render함수가 꼭 있어야하고 반환해야함. 힘수 컴포넌트의 장점 클래스형 컴포넌트보다 선언하기가 편하다. 메모리 자원도 클래스형 컴포넌트보다 덜 사용. 프로젝트를 완성하여 빌드한 후 배포할 때도 결과물..

react_study import "./App.css"; 특정파일을 불러옴(App.css) JSX 보기 쉽고 익숙함, 더 높은 활용도 const root = ReactDOM.createRoot(document.getElementById('root')); root.render() React.StrictMode 컴포넌트 = 레거시 기능으로 경고를 주는 디버깅용 컴포넌트 JSX 내부에서 자바스크립트 표현식 작성 가능 let은 if 내부에선 다른 값을 주고 외부에서 또 다른 값 줄 수 있음 const는 한번 지정하면 변경 불가 function App() { const name='리액트' return( {name === '리액트'?( 리액트입니다. ) :( 리액트가 아닙니다. )} ); } --> function..