Event 기본적인 Props, State를 익혔으니, 본격적으로 사용자와 상호 작용할 수 있게 만들어야 한다 상호 작용이 이루어지려면 웹 브라우저의 DOM 요소를 조작해야 한다 가령 사용자가 마우스로 버튼을 클릭했을 때 onclick 이벤트를 실행하는 것과 같은 것을 말한다 앞전 내용에 state를 설명하기 위해 이미 몇 번의 이벤트를 사용했었다 이벤트는 상호 작용에 있어서 굉장히 중요한 기능이며, 잘 알아둘 필요가 있다고 생각한다 HTML 환경에서 이벤트를 만들어본 경험이 있다면 리액트 또한 익숙하게 느껴질 수 있다 리액트 또한 HTML 환경에서와 비슷하게 사용되지만, 아래와 같은 몇 가지 주의 사항들이 있다 - 이벤트의 이름은 카멜 표기법으로 작성해야 한다 예) onclick → onClick, o..

State props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다 (props를 전달받은 자식 컴포넌트는 props의 내용을 절대로 수정할 수 없다) 즉, props를 변경하기 위해서는 부모 컴포넌트가 바꾸어주어야 비로소 변경이 될 수 있다 이러한 문제를 해결하기 위해 State를 사용하게 된다 State는 크게 두 종류로 클래스형 컴포넌트의 state, 함수형 컴포넌트의 state가 있다 함수형 컴포넌트 기존 함수형 컴포넌트에서는 state의 사용 자체가 불가했지만, 16.8 이후 사용할 수 있게 되었다 클래스형 컴포넌트와 state에 대한 사용법 자체는 차이가 있다 함수형 컴포넌트에서는 useState 함수를 사용해..

State props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다 (props를 전달받은 자식 컴포넌트는 props의 내용을 절대로 수정할 수 없다) 즉, props를 변경하기 위해서는 부모 컴포넌트가 바꾸어주어야 비로소 변경이 될 수 있다 이러한 문제를 해결하기 위해 State를 사용하게 된다 State는 크게 두 종류로 클래스형 컴포넌트의 state, 함수형 컴포넌트의 state가 있다 클래스형 컴포넌트 class Counter extends Component { constructor(props) { super(props); this.state = { number: 0 }; } 클래스형 컴포넌트에 state를 설정할..

컴포넌트 컴포넌트를 선언하는 방식에는 두 가지 방식이 있다 하나는 클래스형 컴포넌트, 또 하나는 함수형 컴포넌트다 클래스형 컴포넌트의 구성은 아래와 같다 import React, { Component } from "react"; class App extends Component { render() { const name = "react"; return {name}; } } export default App 클래스형 컴포넌트는 render 함수가 꼭 필요하며, render() 안에서 출력할 JSX를 반환해야 한다 위 코드를 함수형 컴포넌트로 변환하면 아래와 같이 작성할 수 있다 import React, { Component } from "react"; const App = () => { const name..

JSX 문법 부모 요소가 없는 경우 최상위에는 반드시 하나의 Element만 위치해야 한다 즉, 여러 컴포넌트가 존재한다면 그것들을 감싸줄 부모 요소가 하나는 필요하다는 것이다 VSCode 내에서 이미 잘못된 코드임을 알려주고 있으며, React page에서 또한 에러를 출력한다 위 코드는 아래와 같이 수정해야만 정상적으로 동작할 수 있다 부모 요소 를 추가해줌과 동시에 잘 동작하는 것을 확인할 수 있다 이러한 에러가 발생하는 이유는 리액트가 가지고 있는 특징 중 하나인 Virtual DOM 때문이다 Virtual DOM에서 변화를 감지하고 효율적인 렌더링을 진행하기 위해서는 최상위 컴포넌트의 내부는 하나의 DOM tree의 구조를 이루어야하기 때문이다 그렇다면 부모 요소로는 꼭 여야만 하는가? 에러 코..

추가 공부가 필요한 키워드 XML, 번들링, 바벨, 크로스 브라우징, 트랜스파일러 React는 문자열도, HTML도 아닌 JSX라는 JS의 확장 문법을 사용한다 const element = Hello, React!; 이때 React Element는 Browser DOM Element와는 달리 일반 객체(plain object)로 쉽게 생성할 수 있다 JSX는 자바스크립트의 확장 문법이다. XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다 위 코드는 JSX로 작성된 코드로, 번들링 과정에서 어떻게 JS 형태로 변환되는지 확인해보자 funtion App() { return React.c..

CSS 적용 방법 HTML 문서에 CSS 스타일을 적용할 때에는 다음과 같이 세 가지 방법을 사용할 수 있습니다. 1. 인라인 스타일(Inline style) 2. 내부 스타일 시트(Internal style sheet) 3. 외부 스타일 시트(External style sheet) 인라인 스타일(Inline style) 인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다 인라인 스타일은 해당 태그의 요소에만 스타일을 적용할 수 있다 Change text color 해당 방식은 한 번 스타일을 설정하고나면 이후 변경이 어렵다 또한 스타일 시트의 이점이 사라지기 때문에, 꼭 필요한 경우에만 사용해야 한다 내부 스타일 시트(Internal style sheet..

추후 추가

자바스크립트 비동기의 등장 초기 웹 환경은 서버에서 모든 데이터를 로드하여 페이지를 빌드하는 방식으로 자바스크립트에 별도의 비동기 처리가 필요하지 않았다 이후 Ajax(Asynchronous JavaScript and XML)기술의 등장으로 페이지 로드 없이 Client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 되었다 XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낸다 자바스크립트와 비동기 자바스크립트는 single-threaded language 만일 서버 요청을 기다려야하는 경우 유저는 멈춰있는 브라우저를 보게 된다 위와 같은 이유로 동기가 아닌 비동기 처리를 이용해 서버로 통신할 필요가 생기게 된다 비동기 요청 후, main thread는 유저의 입력을 받거나, 페이지..

Form 태그에 완료, 삭제 추가하기 해당 내용은 앞전 포스트와 이어지는 내용 전 내용 : https://wildcard.tistory.com/entry/8-React-Form [Array Form 예시 - 완료, 삭제 기능 추가] Line 38, ListView Component에 onComplete, onRemove Props를 추가 ListView에서 완료버튼을 Click했을 때 위 함수가 실행 newList[index].isCompleted = true; 전달받은 index 매개 변수의 isCompleted 값을 true로 변환 isCompleted는 버튼의 flag값으로 사용할 key값이라고 전 포스팅에서 다루었다 ListVew에서 삭제버튼을 Click했을 때 위 함수가 실행 newList.sp..