React

id 를 부여해준후 자바스크립트가 태그를 찾고 찾은 태그 안에 React 컴포넌트를 표시할 수 있다.싱글 페이지 어플리케이션 이다.개발 환경을 설정하고, 최신 js를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 을 최적화 해준다.CRA는 백 앤드 로직이나 데이터 베

위의 문법을 JSX라 하며 JavaScript를 확장한 문법이다. 자바스크립트의 모든기능이 포함되어있다. JSX는 React element를 생성한다. 필수적인 요소는 아니지만 자바스크립트 코드안에서 UI관련 작업을 할 때 시각적으로 더 도움이 된다. JSX에

엘리먼트는 화면에 표시할 내용을 기술한다.브라우저 DOM 엘리먼트와 달리 React엘리먼트는 일반 객체이며, 쉽게 생성할수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.div태그 안에 들어가는 모든 엘리먼트를 React DOM에서 관

개념적으로 컴포넌트는 JavaScript함수와 유사하다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React엘리먼트를 반환한다.JavaScript함수를 작성하므로서 컴포넌트를 정의할수 있다.이 함수는 데이터를 가진 하나의 "p

다음 코드는 렌더링된 출력값을 변경하기위해 ReactDOM.render()을 호출한것이다.아래의 예제는 컴포넌트를 재사용하고, 캡슐화 하는 코드이다. 이 컴포넌트는 스스로 타이머를 설정하고, 매초 업데이트 한다.위의 Clock() 과 같은 함수 컴포넌트를 다섯단계의 클

React의 이벤트는 소문자 대신 캐멀케이스를 사용한다.JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.React에서는 반드시 preventDefault를 명시적으로 호출해야 한다.예를 들면 일반, HTML에서는 새페이지를 여는 링크의 기본 동작을 방지

React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다.조건부 렌더링을 한 컴포넌트 이며 결과는 Please sign up. 이 나온다.엘리먼트를 저장하기 위해 변수를 사용할수 있다. 출력의 다른 부분은 변하지 않은 채로 컴포넌트의 일부를 조

엘리먼트 모음을 만들고 중괄호 {} 를 이용하여 JSX에 포함 시킬 수 있다.일반적으로 컴포넌트 안에서 리스트를 렌더링 한다.리스트 항목을 작성할 경우 각 항목에 반드시 key를 정해줘야 한다.Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하도록 해준

React에서는 조금 다르게 form을 처리한다. 이를 위한 표준 방식은 "제어 컴포넌트"라고 불리는 기술이다.HTML에서 <input>, <textarea>, <select>와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를

어떤 자식 컴포넌트가 들어올지 미리 예상할수 없는 경우가있다. '박스'역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼수 있다.이러한 경우에는 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋다.JS

컴포넌트가 브라우저 상에 나타나는것🔵 constructor생성자 함수브라우저가 만들어 질때 가장 먼저 실행 되는 함수 이다.컴포넌트가 가지고 있어야할 state를 초기 설정한다.🔵 getDerivedStateFromProps ~ Updating -> New prop

특정 DOM에 작업을 해야 할 때 ref를 사용한다.즉, DOM을 꼭 직접적으로 건드려야 할때 ref를 사용하는 것이다state를 사용하여 필요한 기능을 구현했지만, state만으로 해결할수 없는 기능들이 있다특정 input에 포커스 주기스크롤 박스 조작하기Canvas

이미지 업로드하기 파일 업로드는 `` 로 할수 있다. 파일 선택 input 만들기 위와 같이 입력 하면 아래와 같은 input창이 나오게 된다. file 유형의 input요소에는 파일을 하나 혹은 여러개 선택 할수 있다(multiple ). 그후 양식을 제출해 서