React Part 12-8. 리액트 살펴보기(Form) HTML의 폼 엘리먼트는 자체가 내부 상태를 가지기에 React의 다른 DOM 엘리먼트와 조금 다르게 동작합니다. 위의 폼은 사용자가 제출하면 새로운 페이지로 이동하는 동작을 수행합니다. React에서 동일한 동작을 원한다면 그대로 사용해도 괜찮습니다. 하지만 대부분 Javascript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리합니다. 이를 위한 표준 방식이 "제어 컴포넌트(controlled components)"라고 불리는 기술을 이용하는 것입니다. 제어 컴포넌트(Controlled Component) HTML에서 input, textarea, select와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. .. Today Learning _ 2020. 3. 21. Part 12-5. 리액트 살펴보기(이벤트 처리하기) React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트와 매우 유사합니다. 다만 몇 가지 문법적인 차이는 존재합니다. - React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. - JSX를 사용해 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. - React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault()를 명시적으로 호출해야 합니다. 일반적으로 HTML에서는 새 페이지를 여는 링크의 기본 동작을 방지하기 위해 return의 값으로 false를 줍니다. 하지만 react의 경우는 SPA(Single Page Application)이므로 페이지가 넘어가는 것을 방지해야 합니다. 따라서 preventDefault를 작성해서.. Today Learning _ 2020. 3. 18. Part 12-2. React 살펴보기(엘리먼트 렌더링) element는 React 앱의 가장 작은 단위입니다. 또한 화면에 표시할 내용을 기술하기도 합니다. const element = Hello, react! ; 브라우저 DOM 엘리먼트와 달리 React는 일반 객체이며 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. ** 컴포넌트와 엘리먼트를 혼동할 수 있지만, 엘리먼트는 컴포넌트의 구성 요소이다. DOM에 엘리먼트 렌더링 하기 HTML 파일에 id가 root인 div가 있습니다. 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기에 이것을 ROOT DOM 노드라고 부릅니다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려.. Today Learning _ 2020. 3. 14. 이전 1 다음
