22.09.26- TIL

오늘 배운 것

props, css, sass, styled-components로 스타일링, 조건부 렌더링, useRef 

 

배운 것 정리

1. props

리액트에서는 상위 컴포넌트에서 하위 컴포넌트로 props라는 것을 통해 데이터를 전달

그러면 하위 컴포넌트에서 props로 데이터를 전달 받아서 사용 가능

 

1) 함수형 컴포넌트에서의 props

App.jsx

function App() {
return (
<div className="App">
<MainHeader text="Go naver" href="https://naver.com" userID="pji" />
</div>
);
}
export default App;

MainHeader.jsx

function MainHeader(props) {
return (
<div>
<h1>{props.userID} 님 반갑습니다.</h1>
<a href={props.href}>{props.text}</a>
</div>
)
}
export default MainHeader;

props는 다양한 데이터를 한꺼번에 전달할 수 있고 다양한 데이터는 props라는 객체 하나로 받아서 사용 가능

 

function MainHeader(props) {
const { userID, text, href } = props;
return (
<div>
<h1>{userID} 님 반갑습니다.</h1>
<a href={href}>{text}</a>
</div>
)
}
export default MainHeader;

function MainHeader({ userID, text, href }) {
return (
<div>
<h1>{userID} 님 반갑습니다.</h1>
<a href={href}>{text}</a>
</div>
)
}
export default MainHeader;

prop는 객체이기 때문에 구조분해할당으로 편하게 사용 가능

 

2) 클래스형 컴포넌트에서의 props

this.props로 접근

클래스이기 때문에 매개변수를 따로 받지 않음

this.props를 쓰면 코드가 길어져서 보통 구조분해할당으로 변수로 만들어서 사용

 

App.jsx

function App() {
return (
<div className="App">
<ClassProps name="뽀로로" age="5" nickName="사고뭉치" />
</div>
);
}
export default App;

 

ClassProps.jsx

import React, { Component } from "react";
class ClassProps extends Component {
render() {
const { name, age, nickName } = this.props;
return (
<div>
<h1>이름: {name}</h1>
<h2>나이: {age}</h2>
<h2>별명: {nickName}</h2>
</div>
)
}
}
export default ClassProps;

2. 컴포넌트 스타일링

1) 기본 CSS로 꾸미기

TestCss.css

div.component-root {
background-color: orange;
}
div.component-root h1 {
color: red;
}
div.component-root span {
background-color: white;
font-weight: 700;
}

 

TestCss.jsx

import '../style/TestCss.css';
export default function TestCss() {
return (
<div className="component-root">
<h1>CSS 테스트 컴포넌트 입니다</h1>
<span>해당 컴포넌트를 기본 CSS로 꾸며 보아요!</span>
</div>
)
}

2) SASS/SCSS로 꾸미기

리액트는 기본적으로 컴포넌트에 컴포넌트가 들어가는 구조로 되어 있어서 중첩 문법을 지원하는 sass와의

궁합이 좋다.

 

TestCss.scss

div.component-root {
background-color: skyblue;
& > h1 {
color: dodgerblue;
}
& > span {
background-color: pink;
font-weight: 700;
}
}

 

TestCss.jsx

export default function TestCss() {
return (
<div className="component-root">
<h1>CSS 테스트 컴포넌트 입니다</h1>
<span>해당 컴포넌트를 기본 CSS로 꾸며 보아요!</span>
</div>
)
}

3) styled components

리액트는 기본적으로 컴포넌트 단위가 중심이 되는 구조이다.

컴포넌트는 상대적으로 작은 규모로 운영이 되기 때문에 기존의 방식처럼 css파일을 분리해서 운영할 필요가 필요가 크지 않기 때문에 컴포넌트 파일(js파일) 내부에 css 코드를 쓰는 방식이다.

 

TestStyled.jsx

const MyDiv = styled.div`
background-color: orange;
`;
const MyHeading = styled.h1`
color: blue;
`
const MySpan = styled.span`
background-color: pink;
font-weight: 700;
`

export default function TestStyled() {
return (
<MyDiv>
<MyHeading>h1 태그 입니다!</MyHeading>
<MySpan>span 태그 입니다!</MySpan>
</MyDiv>
)
}