Web/react2 [React]props, state로 컴포넌트 내부 속성 설정하기 리액트로 컴포넌트를 제작하다 보면 컴포넌트 내부의 속성을 부모 컴포넌트에서 지정해주고 속성 값 조작이 필요한 경우가 있습니다. 이렇게 속성 설정이 필요할 때 사용할 수 있는 것이 바로 props와 state입니다. props와 state는 내부의 속성, 쉽게 생각하면 내부 변수를 지정해 줄 때 사용하는 요소입니다. 두 요소의 차이는 props는 부모 컴포넌트에서 값을 지정할 때 사용하고 state는 컴포넌트 내부에서 값을 바뀔 수 있는 차이가 있습니다. 이해를 돕기위해 props와 state를 하나씩 실습을 해보겠습니다. props 먼저 아래의 코드를 보겠습니다. -Parent.js import React from 'react'; import Children from './Children'; const .. 2020. 12. 23. [React]리액트 기본 구조 / JSX란? 기본 구조 처음 리액트를 처음 접한다면 어떤 식으로 사용을 해야 되는지 감을 잡는 게 중요한 것 같습니다. 리액트의 기본 구조는 컴포넌트 구조를 가지고 있습니다. 컴포넌트 구조란 예를 들어 아래의 이미지처럼 UI를 개발한다고 할 때 '로고 이미지', '검색어 입력 상자', 오른쪽 상단의 '버튼' 등 필요한 컴포넌트들이 있을 것입니다. 이러한 컴포넌트들을 각각의 파일로 작성을 하고, 그 파일들을 import 시켜 재활용하여 사용할 수 있는 구조를 말합니다. 재활용한다는 말을 좀 더 자세히 말씀드리자면 위의 이미지에서도 첫 번째 이미지와 같이 '로고 이미지', '검색어 입력 상자'를 보실 수 있을 것입니다. 이때 새로운 코딩을 하는 것이 아닌, 첫 번째 이미지에서 사용하였던 컴포넌트를 다시 사용하여 만들 수.. 2020. 12. 19. 이전 1 다음 728x90 반응형
