react5 [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-1. 컴포넌트와 props 컴포넌트 앞서 우리는 React에서 특정 부분이 어떻게 렌더링 되는지를 정하는 선언체가 있는데, 이를 컴포넌트(component) 라고 한다고 했다. 컴포넌트는 다른 프론트엔드 프레임워크의 템플릿 처럼 UI를 구성하고 데이터를 어떻게 표시할지에 대한 정보를 선언적으로 제공할 뿐 아니라, 컴포넌트의 생명주기(Life-cycle) 에 맞춰 다양한 기능을 제공한다. 함수형 컴포넌트 function MyComponent(){ const name = "모각코"; return Hello, {name} ; } export default MyComponent; 위와 같이 function 문법으로 선언한 컴포넌트를 함수형 컴포넌트 라고 한다. 이전에 컴포넌트 내의 render 함수가 react Element를 반환한다고.. 2023. 11. 27. 이전 1 2 다음
