분류 전체보기31 map 함수를 사용한 배열 랜더링 하기 map 함수를 사용한 배열 랜더링 하기 개요 배열을 다룰때 사용하는 Javascript의 내장 함수인 map에 대하여 알아보고, 어떻게 활용하는지에 대해 알아보자. 먼저, Javascript의 Array.map 에 대한 내용에 대해 간단하게 알아 본 후, 예제를 통해 리액트에서 어떻게 활용하는지 다루어 보겠다. map 함수란? map() 함수란, 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 return 하는 함수이다. 이 개념에 대해 햇갈릴 수 있지만, 다음 예제를 보고 보다 쉽게 이해해보자. const data = [1, 3, 5, 7, 9]; // map 함수 const mapData = data.map((item) => item * 2); console.log.. 2022. 1. 14. Class Component VS Functional Component 그리고 Hooks Class Component VS Functional Component 그리고 Hooks 개요 Class Component 와 Functional Component의 차이점에 대하여, 그리고, Functional Component에 대해 조금더 자세히 알아보자. 솔직히 요즘 React로 개발을 할때, Functional Component로 대부분 개발이 이루어 진다고 해도 무방하다. 하지만 Class Component에 대한 내용도 반드시 알고 있어야 된다고 생각한다. 그 이유는, 리액트가 어떤 생명주기로 랜더링이 되는지를 알고 있어야, 리액트로 개발을 할 수 있다. 또한 왜 요즘에는 Class Component로 개발 되지 않고 Functional Component로 개발 되는지를 본인 스스로 깨닫고,.. 2022. 1. 13. React - DOM에 접근할 때, ref 사용하기 DOM에 접근할 때, ref 사용하기 개요 DOM에 직접적인 접근을 할때 사용하는 ref에 대해 알아 보겠다. Vanilla Javascript에서는 DOM 객체에 접근하기 위해, querySelector 또는 getElementById API를 사용해야 한다. 반면, 리액트에서는 DOM API를 이용한 컴포넌트 제어 방식을 권장하지 않기 때문에 ref를 사용한다. 왜 DOM API 가 아닌 ref를 사용하는가? 기본적으로 array map 메소드를 이용한 렌더링이 되는 리스트 형태의 Element는 같은 id를가지기에 특정 DOM 객체(querySelector, getElementById)로 판별하기 어렵다. 리액트를 이용한 웹 소프트 웨어에서는 데이터는 State로 조작되기 때문에, DOM API와 .. 2022. 1. 12. React Input 상태 관리하기 개요 이번 포스트에서는 React 컴포넌트의 Form에 발생하는 사용자 입력값을 제어 하는 방법을 알아보겠다. 단일 Input 제어 다음과 같이, src/components/FormInput.js 파일을 만들어 컴포넌트를 생성해보자. import React from "react"; class FormInput extends React.Component{ state = { name:"" } render(){ return( {this.state.name} ); } } export default FormInput; 작성이 완료되었다면, 터미널에 npm start를 입력하여, 프로젝트를 실행 하자. 그리고 App 컴포넌트에서, FormInput을 렌더링 시켜보자. 프로젝트 실행을 하였다면, 인풋창에, 값을 입력.. 2022. 1. 11. 이전 1 ··· 3 4 5 6 7 8 다음
