Programming/React

리액트 - setState() 함수 이해하기 setState 개념 리액트에서 props나 state 값이 변경이 되면 해당 컴포넌트의 render() 함수가 다시 호출되며 해당 render() 함수에 속해있는 다른 컴포넌트들도 다시 렌더링되면서 화면이 다시 그려지게 됩니다. 컴포넌트가 생성된 후 state 값을 바꾸는 방법은 setState 함수를 사용합니다. this.state.mode = 'welcome' // 리액트가 state 값이 바뀌었다는 것을 인식하지 못함 -> 렌더링 안됨 this.setState({ mode:'welcome' // state값이 바뀌었다는 것을 인식학고 render가 호출됨 -> 렌더링되면서 화면이 다시 그려짐 }) 주의할 점 render함수 안에서 this는 컴포넌트 자..

React 리액트에서 bind() 함수 이해하기 (개념 및 사용법) 기본적으로 리액트에서는 render라는 함수 안에서 this는 컴포넌트 자체를 가리키는데 함수에서는 this가 아무값도 없습니다. 이때 bind() 함수를 사용하여 this를 주입하여 주는 겁니다. # bind 함수 이해하기 먼저 var obj = {name : 'Moony'}; 로 obj의 값에 담아놓고 bindTest() 함수로 인해 this.name 값을 출력 시 undefined 이라고 뜨게 됩니다. 이때 bindTest() 메서드가 this가 obj로 바인드 시켜주어 this.name이 'Moony'값을 가져올 수 있게 만들어 주는 것입니다. 자 이제 그럼 obj가 function의 this가 되게 bind() 함수를 사용하여 ..

Each child in a list shoul have a unipue "key" prop 오류 해결 방법 # Each child in a list shoul have a unipue "key" prop. 리액트에서는 여러개의 엘리먼트를 자동으로 생성할 때 생성되는 앨리먼트를 다른 것들과 구분할 수 있도록 식별자(key)를 요구합니다. 리액트 내부적으로 필요로 하기 때문에 요청하는 것이기 때문에 여러개의 데이터를 자동으로 생성할 때 유의하시기 바랍니다. 아래는 자식 컴포넌트에서 props를 리스트 형식으로 받아 자동으로 엘리먼트 여러개를 while문을 통해 만들고 있습니다. 이때{data[i].title} 에서 key(식별자) 값을 주어 에러가 나지 않도록 하였습니다. import React, { Co..

React에서 이벤트 처리 정리 및 예제 - onClick, bind, setState # 리액트(React)의 이벤트 문법 리액트에서는 함수명을 카멜케이스로 작성하고 onclick(전부 소문자)으로 사용하는 자바스크립트와 달리 onClick 으로 사용합니다. # 이벤트 기본 동작 방지 클릭하세요 태그에 onClick 이벤트를 설정하면 기본적으로 href로 페이지를 이동하는 기본 동작이 있습니다. e.preventDefault(); 를 사용하여 이를 동작하지 않게 하고 onClick에 넘겨준 것만 실행할 수 있게 해줍니다. function clickEventFunc(e){ e.preventDefault(); console.log('페이지 이동 없이 클릭'); } event를 인자로 받아 e.prevent..

React 리스트(배열) 데이터 여러 개 출력하는 방법 React에서 리스트(배열) 데이터를 props로 받아 여러개의 데이터를 jsx 파일에서 출력, 렌더링하는 방법을 알아보겠습니다. # React 리스트 타입 데이터 여러개 출력하는 방법 ① contents 라는 state에 데이터를 리스트(배열) 형식으로 저장해 두고 자식 컴포넌트인 TOC 컴포넌트에 props로 데이터 값을 전달합니다. App.js - 부모 컴포넌트 import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subjec..

1. React - props와 state 개념 리액트 컴포넌트에서 다루는 데이터는 props와 state 두가지로 나뉩니다. 또 리액트에서는 props의 값이나 state의 값이 바뀌면 해당되는 component(컴포넌트)의 render(){} 함수가 호출되도록 약속되어 있습니다. 그말은 즉, props나 state가 바뀌면 화면이 다시 그려진다 라는 말입니다. props와 state 개념 props(읽기 전용) props는 부모(상위) 컴포넌트가 자식(하위) 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props를 받아오고 받아온 props를 직접 수정하는 것은 불가능합니다. 하위 컴포넌트에서 상위 컴포넌트의 값을 변경하고 싶을 때에는 event를 사용합니다. state(컴포넌트 자기 자신이 가지..