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..

자바스크립트 비동기의 등장 초기 웹 환경은 서버에서 모든 데이터를 로드하여 페이지를 빌드하는 방식으로 자바스크립트에 별도의 비동기 처리가 필요하지 않았다 이후 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..

내가 생각하는 핵심 키워드 : Map Function 사용자로부터 입력을 받아 데이터를 처리할 수 있는 Form 선행 : State, Event (Javascript) [State] - Component 내에서 유동적으로 변할 수 있는 값을 의미 (원래는 Class component에서만 가능했지만, 현재는 Function component를 많이 사용) - 개발자가 의도한 동작에 따라서 또는 사용자의 입력에 따라 값이 변경될 수 있다 (단, State의 값을 변경하는 것이 아닌 setState 함수를 return해서 변경해야 한다) - State 값이 변경되면 React가 자동으로 변경된 부분을 계산 후 재렌더링 한다 [State의 변경 방법] State의 변경 방법에는 두 가지가 있었다 현재 값을 기..

내가 생각하는 핵심 키워드 : Memoization, .current(useRef) useMemo - 지정한 State나 Props가 변경될 경우 해당 값을 활용해 계산된 값을 메모이제이션, 재렌더링 시 불필요한 연산을 줄인다 - 연산은 렌더링 단계에서 이루어지기 때문에 시간이 오래 걸리는 로직을 작성하지 않는 것을 권장 (메모리의 한 공간을 계속해서 점유하고 있어야하기 때문에 잘못 사용시 성능 저하 이슈 발생) - string, number 뿐만 아닌, object, array, function 등 모든 자바스크립트 연산 결과를 메모이제이션 [useMemo 사용 예시] const multi = useMemo(() => { return first * second }, [first, second]) fir..