컴포넌트5 [React] 컴포넌트 반복하기 우선 반복을 하기전에 자바스크립트의 Array.map()함수에 대해 알고 넘어가야합니다. map()함수는 배열의 요소들을 인자로 가진 함수로 가공해서 배열의 형태로 반환하는 함수입니다. 이 함수를 꼭 기억해주세요. const animals = ['야옹', '멍', '짹', '삐약']; const repeat = animals.map(animal => animal.repeat(2)); console.log(repeat); 1. 배열을 컴포넌트 배열로 만들기 우선 간단하게 배열을 이용해서 컴포넌트 배열로 만들어서 반환하는 방법을 소개해드리겠습니다. 컴포넌트를 하나 만들어줍니다. 이때 map()함수는 animals배열의 요소들을 JSX형태로 변환해주는 역할을 합니다. import React from 'reac.. 2021. 12. 7. [React] State - state의 소개와 클래스형 컴포넌트의 state 지난 포스트에서는 컴포넌트의 속성인 props를 공부했었습니다. 이번에 배우는 stete는 컴포넌트 내부에서 변경될 수 있는 값입니다. 1. state state는 컴포넌트 내부에서 바뀔 수 있는 값 입니다. props와의 차이점은 props는 컴포넌트에서 사용되기 위해 부모 컴포넌트가 설정해주는 값이기에 값을 바꾸기 위해서는 부모 컴포넌트에서만 접근했어야 합니다. 그래서 props는 마치 함수의 인자 처럼 외부에서 컴포넌트로 전달 되었습니다. 반면 state는 현재 컴포넌트에서 값이 바뀔 수 있다는 차이점이 있습니다. 그래서 state는 마치 함수(클래스) 내부에서 선언되어 사용되는 변수처럼 컴포넌트 내부에서 자유롭게 이용할 수 있습니다. 또 이전에 함수형과 클래스형 컴포넌트를 소개하면서 state 사.. 2021. 11. 3. [React] props - 클래스형 컴포넌트 지난번에 주로 쓰게 될 함수형 컴포넌트에서 props 사용법을 배웠다면, 이번엔 클래스형 컴포넌트에 대해서 간단하게 알아보겠습니다. props에 대한 기초적인 설명은 함수형 컴포넌트 props의 설명을 참조해 주세요. 2021.11.02 - [Programming/React] - props - 함수형 컴포넌트 props - 함수형 컴포넌트 리액트의 컴포넌트 속성을 설정하는 props에 대해 공부해보겠습니다. 1. props props는 properties의 줄임 표현으로 말 그대로 속성입니다. 즉 props는 컴포넌트의 속성을 관리하는데 사용되는 요소라고 bamtory29.tistory.com 1. 클래스형 컴포넌트 사용 클래스형 컴포넌트에서 props를 이용하는 방식은 함수형과 다르지 않습니다. 우선 .. 2021. 11. 2. [React] 컴포넌트 만들기 이제 App.js라는 만들어진 컴포넌트에서 벗어나 직접 컴포넌트를 하나 만들어 보겠습니다. 1. 컴포넌트 만들기 컴포넌트를 만들기 위해서 src 디렉토리 내부에 새 파일을 만들어 줍니다. 저는 분리를 위해 src 아래에 새로운 디렉토리를 만들고 그 안에 컴포넌트들을 모으기로 했습니다. 컴포넌트를 만들때 주의사항은 자바스크립트와 다르게 컴포넌트 파일명이나 컴포넌트명을 PascalCase 방식으로 명명해야한다는 점 입니다. 새 파일을 만들고 다음과 같이 작성합니다. 코드 자체는 자바스크립트와 다른점이 없기 때문에 설명은 따로 없습니다. import React from 'react'; const FirstComponent = () => { return 처음으로 만들어 본 컴포넌트 입니다. }; export d.. 2021. 11. 2. [React] 컴포넌트 소개 - 클래스형과 함수형 컴포넌트 이제 리액트에 대해 본격적으로 첫 발을 내딛을 시간입니다. 리액트는 ES6 이후부터의 문법을 많이 사용하기 때문에 ES6이후 문법이 익숙하지 않다면 읽으시는데 어려움이 있으실 수 있습니다. 제 블로그 자바스크립트 탭에 자주 사용되는 ES6에 대한 문법들을 기재해놨으니 참조해주시길 바랍니다. 1. 컴포넌트 우선 들어가기에 앞서 컴포넌트(Components)에 대해 알아봐야 합니다. 리액트에서 컴포넌트라고 하는 것은 자바스크립트의 함수 개념과 유사하다고 할 수 있습니다. 이 컴포넌트를 통해서 UI를 만들어냄은 물론이고 이벤트에 따른 동작 변화까지 만들어 낼 수 있습니다. 리액트의 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트 두가지가 있습니다. 그리고 그 중에서 클래스형 컴포넌트에 대해서 먼저 다루도록 하.. 2021. 11. 2. 이전 1 다음 300x250
