리액트3 [React] map 함수 사용법 먼저 리액트 내부에서 같은 요소들을 반복해서 사용하고(반복문) 싶을 때 for문을 가장 먼저 떠올리기 쉽겠지만 우리가 잘 아는 JSX 문법 상에서는 {} 중괄호 안에 for 문이 작동하지 않는다. 물론 for문을 사용할 수 있는 방법이 있지만 오늘은 for문을 대체할 수 있는 map() 사용법에 대해서 공부를 해보았다. var arr = [2,3,4]; arr.map(function(a){ return a * 2 }); //결과 arr = [4,6,8] 위와 같이 먼저 arr이라는 배열은 선언을 해주고 map함수를 사용하여 콜백 함수를 사용해 a를 파라미터로 추가해주고 리턴 값을 만들어 준다. a라는 파라미터가 배열 안에 하나하나의 데이터라고 이해하면 쉽다. 본격적으로 map 함수를 사용해보도록 하자 i.. 2022. 3. 27. [ReactJS] - JSX 문법의 특징 오늘은 JSX를 사용함에 있어 여러 가지 준수해야 할 문법 규칙에 대해서 알아보도록 하려고 한다. 혹시 JSX란 어떤 것인가를 모르시는 분들이라면 아래 글을 먼저 읽고 오는 것을 추천한다. https://luka-frontend.tistory.com/9?category=1023680 [ReactJS] - JSX란? (소개, 문법) - 기초 JSX 정의 -JSX는 JavaScript를 확장한 문법이다. -UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장한다. -JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능 luka-frontend.tistory.com JSX 문법 1. 컴포넌트에 여러 요소들이 있다면 반드시 부모 하나가 감싸는 형태여야 한다.. 2022. 2. 9. [ReactJS] - JSX란? (소개, 문법) - 기초 JSX 정의 -JSX는 JavaScript를 확장한 문법이다. -UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장한다. -JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있다. -브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JSX 문법 const sentence = Hello, my name is; 위 코드는 가장 기본적인 JSX문법이다. sentence라는 변수를 선언한 후 내부에 h1태그를 사용하였다. 코드를 보면 알수있듯이 JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 쉽게 작성하여 가독성이 높고 사용이 편리하다 const root = document.getElementByI.. 2022. 2. 8. 이전 1 다음
