리액트34 [React] State - 함수형 컴포넌트의 state와 주의점 지난번에 클래스형 컴포넌트의 state를 다뤘습니다. 이번엔 함수형 컴포넌트의 state를 다룰 차례입니다. 함수형 컴포넌트에서는 바로 state에 접근할 수 없고 useState 함수를 통해서 state에 접근할 수 있습니다. 1. useState useState 함수는 함수형 컴포넌트에서 state를 조작할 수 있게 해주는 기능입니다. useState는 Hooks 기능 중 하나입니다. useState 함수가 처음 만나게되는 Hooks 가 되겠네요. 이것을 배우기 위해 '배열 비구조화 할당'이란것을 사용하겠는데, 이것에 대한 설명은 아래를 참조해주세요. https://bamtory29.tistory.com/entry/Javascript-%EA%B5%AC%EC%A1%B0-%EB%B6%84%ED%95%B4.. 2021. 11. 3. [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] props - 함수형 컴포넌트 리액트의 컴포넌트 속성을 설정하는 props에 대해 공부해보겠습니다. 1. props props는 properties의 줄임 표현으로 말 그대로 속성입니다. 즉 props는 컴포넌트의 속성을 관리하는데 사용되는 요소라고 볼 수 있습니다. props의 설정은 속성을 설정할 컴포넌트가 아닌 컴포넌트를 불러와서 이용하는 부모 컴포넌트에서 설정한다는 점을 주의해야합니다. props는 함수형 컴포넌트에서 인자(Parameter)로 받아와서 이용할 수 있습니다. 인자로 받아온 props는 사용할 때 JSX의 자바스크립트 표현식 {}을 이용합니다. 인자를 지정하고 .으로 인자의 요소를 지정합니다. import React from 'react'; const PropsPractice = props => { return .. 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 2 3 4 5 6 다음 300x250
