react4 [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. [노마드 코더] - 리액트(ReactJS) 강의를 시작하다 오늘부터 리액트 공부를 시작했다. 수많은 인강들중에 어떤 강의를 통해 입문하는 것이 제일 좋을까 고민했지만 많은 동료들의 추천으로 노마드 코더 강의를 듣기로 결정하였다. 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! nomadcoders.co 내가 생각하는 니꼴라스 쌤 강의의 가장 큰 장점은 어떤 강의보다도 기능의 원리를 쉽게 풀어내주는 교수스킬을 가지고 계신 것 같다. 음...예를 들자면 리액트의 역사, 왜 중요한지 부터 시작해 현 개발자들이 쓰는 스킬들도 매우 중요하지만, 무엇보다 그 스킬들이 나오기 까지의 원리들을 이해하고 넘어가니 개념을 확실히 짚고 넘어 갈 수 있게 되는 것 같다. 개인적으로 나는 무엇이.. 2022. 2. 7. 이전 1 다음
