React

https://nodejs.org/ko/Webpack 과 Babel 같은 도구들 사용하기 위해 설치 https://code.visualstudio.com/download 설치 후 확장팩 설치 : Auto Close Tag, Auto Rename Ta

: 리액트로 만들어진 앱을 이루는 최소한의 단위기존의 웹 프레임워크는 MVC 방식으로 분리하여 관리하기 때문에 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다.반면, 컴포넌트는 MVC 의 뷰를 독립적으로 구성하여 재사용을 할 수있고, 이를 통해 컴포넌트를 쉽게

JSX(JavaScript XML) 이란? >#### : Javascript 에서 XML을 추가한 확장한 문법 리액트로 프로젝트를 개발할때 사용, 공식적인 자바스크립트 문법은 아님 브라우저에서 실행하기 전에 Babel 을 사용하여 일반 자바 스크립트 형태의코드로 변환

: 조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미isSpecial이라는 props 설정여기서 true는 자바스크립트 값이므로 중괄호Hello 컴포넌트에서 isSpecial이 true : 컴포넌트 좌측에 \*표시, false : null

<input 컴포넌트 생성><App 컨포넌트에서 렌더링>\*\*input의 입력값, 값에 표기 그리고 초기화 버튼 클릭시 input 값이 비워지도록 구현< useState, onChange이벤트, e.target >사용: input의 상태를 관리할때

: JavaScript 를 사용할때, 특정 요소를 선택해야하는 상황에서 getElmentById, querySelector 와 같은 리액트의 DOM 선택함수: 함수형 컨포넌트에서 ref를 사용할때 useRef 라는 Hook 함수사용<초기화버튼 클릭시 이름 inpu

배열 1. 배열 렌더링하기 : 동적인 배열을 랜더링하기 위해서는 자바스크립트 배열의 내장함수 map()을 사용한다. 1-1. Map을 이용한 렌더링 >: map() 함수는 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어줌 >