Web12 [React] 3-3. 컴포넌트 반복 map() import React from 'react'; const Iteration = () => { return( Java Python ... ); } export default Iteration; React에서 위와 같이 반복되는 요소가 나타나면 어떻게 처리할까? React는 배열 객체의 내장 함수인 map 함수를 사용하여 주로 반복되는 컴포넌트를 렌더링한다. 먼저 map() 함수의 형식은 아래와 같다. // 형식 arr.map(callback, [thisArg]); const arr = [1,2,3,4,5]; const newArr = arr.map((num)=>{return num*num;}); callback 은 새로운 배열의 요소를 생성하는 콜백 함수를 의미하며, 아래 세가지의 매개변수를 .. 2023. 12. 4. [React] 5-1. ref 참조 React에서 DOM 요소에 이름을 부여하고 변수처럼 직접적으로 다룰 수 있는 방법이 있다. 바로 ref(reference) 개념이다. React는 기존의 JS 문서나 jQuery로 만든 웹사이트에서 DOM 요소를 직접 조작해야 하는 과정을, 대부분 state와 가상 DOM을 이용한 처리를 통해 해결한다. 그렇다면 과연 언제 ref를 써야 될까? 일반적으로는 아래와 같은 용도로 활용된다. 직접 조작중이 아닌 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 함수형 컴포넌트에서는 useRef라는 Hooks를 사용하는데, 이는 이후에 배워보기로 한다. 💡 id와 ref 물론 react 내에서도 기존과 같이 id 속성과 getElementById() 함수를 사용하여 DO.. 2023. 12. 4. [React] 4-1 이벤트 이벤트 사용자가 웹 브라우저에서 DOM 요소와 상호작용하는 것을 이벤트(event) 라고 한다. React는 JS를 기반으로 하고 있기 때문에 이벤트 역시 JS의 그것과 크게 다르지 않다. 함수형 컴포넌트 import React, { useState } from "react"; const Counter = () => { const [number, setNumber] = useState(0); const onClickNumber = () => setNumber(number + 1); return ( +1 ); }; export default Counter; 이전에도 우리는 button 엘리먼트의 onClick 속성을 이용하여, 버튼 클릭 시 이벤트가 발생하게 코드를 짠 적 있다. 이전에는 onClick 속.. 2023. 12. 2. [React] 3-2. state state React에서 state란, 컴포넌트 내부에서 바뀔 수 있는 값이다. React는 state의 변화를 반응적으로 감시하고, state가 변화한다면 페이지를 재렌더링한다. 즉, state는 동적인 웹페이지를 ‘선언적’으로 구성하는데 가장 중요한 요소이자. React의 핵심요소라고 볼 수 있다. 클래스형 컴포넌트 import React, { Component } from "react"; class Counter extends Component { constructor(props) { super(props); this.state = { number: 0, fixedNumber: 0 }; } render() { const { number, fixedNumber } = this.state; return.. 2023. 11. 29. 이전 1 2 3 다음