코딩앙마 React JS 컴포넌트, JSX
2022. 1. 22. 19:49ㆍ코딩공부/React
REACT로 만든 페이지는 컴포넌트로 구성되어있다.
페이지단위로 HTML을 작성하는 것이아니라 각 부분을 컴포넌트로 만들어서 조립하는것.
장점 : 비슷한 부분들은 코드를 재사용할 수 있고, 유지보수도 쉬워진다.
e.g) 네이버의 제목 컴포넌트, 로그인 컴포넌트, 언론사 컴포넌트....
모든 컴포넌트는 맨 앞글자를 대문자로 한다.
함수형 컴포넌트에서 리턴하는 것을 JSX라고 한다.
생긴것은 html과 비슷하다.
class는 리액트에서는 예약어이기 때문에 class 이름을 지정할때는 className을 쓴다.
css style은 객체로 전달해줘야 쓸 수 있다.
function App() {
const name = "가현";
return (
<div className="App">
<h1
style = {{
color: "white",
backgroundColor: "orange",
}}
>
Welcome, {name}! </h1> // {}로 변수를 가져올 수 있다
<p>{2+3}</p> // 숫자열,문자열은 잘 가져오지만 boolean이나 객체는 {}로 못가져옴
</div>
);
}
컴포넌트 안에 컴포넌트를 넣을 수 있다.
여러번써도 되고, 위치도 맘대로 옮길 수 있다.
'코딩공부 > React' 카테고리의 다른 글
코딩앙마 React Js 이벤트 처리 (0) | 2022.01.24 |
---|---|
코딩앙마 React JS CSS 작성법 (0) | 2022.01.22 |
코딩앙마 React JS crate-react-app (0) | 2022.01.22 |
리액트 기초반 1주차(2) (0) | 2022.01.22 |
리액트 기초반 1주차(1) (0) | 2022.01.22 |