react에서 element를 쉽게 만들기 위해 JSX를 사용하고 Bootstrap을 이용해 스타일을 주는 것까지 해봤다.
[React] JSX 이용해 중첩노드 생성, Bootstrap으로 스타일 주기
리액트에서 중첩노드를 만들고 간단한 스타일을 줘봤다. [React] 리액트에서 html태그에 스타일 입히고 중첩 태그 만들기 html문서를 react에서 열고 태그 요소를 하나 만들어서 확인해봤다. [React] 순
developefeel.tistory.com
이번엔 JSX의 표현식을 이용해 원하는 태그에 내용을 나타내는 것을 해본다.
JSX 표현식
원하는 문구를 입력하여 저장한다.
2개 이상의 속성을 묶어서 넣을 수도 있다.
저장한 표현식을 원하는 태그 안에 입력해준다.
각 컬럼에 저장된 내용대로 출력된다.
함수형 컴포넌트
이번엔 함수를 생성하고 반환값으로 태그를 입력했다. 여기서 함수형 컴포넌트의 첫글자는 대문자로 해준다.
정의했던 함수의 이름을 태그형식으로 적어준다.
반환값 그대로 태그들이 생성된 것을 볼 수 있다.
ES6문법을 통한 함수형 컴포넌트
간단하게 컴포넌트를 정의할 수도 있다. 마찬가지로 첫 글자는 대문자로 한다.
아래 부분에 정의된 컴포넌트를 적어준다.
원하는 태그나 내용을 표현식과 컴포넌트를 이용해 넣을 수 있다.
클래스형 컴포넌트
함수형 컴포넌트는 리턴문 안에 태그를 감싼 형식으로 생성한다.
클래스형 컴포넌트는 함수형과 비슷하지만 React.Component를 상속받고
render함수를 호출하여 리턴문을 사용한다는 차이점이 있다.
이외로 접근할 때 this를 사용한다는 차이점 몇개가 더 있다는 것만 알아둔다.
편한 방식으로 컴포넌트를 생성하면 되고 보통은 함수형으로 생성하는 경향이 좀 더 쌘 편이다.
'Front-end' 카테고리의 다른 글
| [CSS] Selector 종류 (0) | 2022.08.17 |
|---|---|
| [React] 컴포넌트 화, props를 이용해 컴포넌트에서 속성 전달 (0) | 2022.08.14 |
| [React] 바인딩 구현 (0) | 2022.06.06 |
| [React] 이벤트 호출 방법 세가지 (0) | 2022.06.06 |
| [React] 컴포넌트 라우팅에 추가 (0) | 2022.06.05 |