📖 오늘 학습 뽀인트!
- React
1-1 배열
1-2 분기에 따라 컴포넌트 렌더링
1-3 스타일 적용
1-4 Route
1-5 Hook 개념
1. React
1-1 배열
<main class="product"> <ul class="product-list"> { [ <Card goods={item[0]} />, <Card goods={item[1]} />, <Card goods={item[2]} />, <Card goods={item[3]} />, <Card goods={item[4]} />, <Card goods={item[5]} />, <Card goods={item[6]} /> ] } </ul> <Cart /> </main> // 위 코드를 array로 표현 const Product = ({ item }) => { return ( <main class="product"> <ul class="product-list"> {item.map(item => (<Card goods={item} key={item.id} />))} </ul> <Cart /> </main> ) }배열을 사용할 때, key 값을 지정해야 된다. key 없이 위에 코드 중
item[3]를 제거한다고 가정하면item[3]를 제거하고 렌더링되고item[4]가item[3]로 되면서 또 제거하고 렌더링되고를 반복하면서item[3]부터 끝까지 제거한다. key 있는 상태에서item[3]를 제거하면item[3]만 제거할 수 있게 된다.
1-2 분기에 따라 컴포넌트 렌더링
변수 상태에 따라 특정 컴포넌트와 연결해주는 방법이다. Route와 비슷한 역할을 한다.
function Test() { return ( <Hello name="ayden"/> // 1 ); } function Hello(props) { // 2 const name = props.name; if(name){ return <One name={name}/> } else { return <Two/> } } function One(props){ return ( <div> <h1>{props.name}입니다.</h1> </div> ) } function Two(props){ return ( <div> <h1>name이 입력된 것이 없습니다.</h1> </div> ) } export default Test;
- Test 컴포넌트에서 Hello 컴포넌트를 연결하고
name="ayden"으로 props를 전달.- 전달 받은 props를 name이라는 변수에 저장하고 값이 있다면 One 컴포넌트를 연결하고 없다면, Two 컴포넌트를 연결한다.
style={ listName === "detail" ? { color: "red" } : { color: "black" } }위 코드처럼 삼항 연산자를 사용해 style을 적용시키는 등 값에 따라 분기 처리할 수 있다.
1-3 스타일 적용
React에서도 스타일을 적용시킬 수 있으며 방법은 여러가지이다.
컴포넌트 전역 스타일 적용
const GlobalStyle = createGlobalStyle` span { color : red; font-size : 12px; } `;위 코드는 styled-components가 제공하는 createGlobalStyle() 함수를 사용한 컴포넌트 전역 스타일 적용 방법이다.
App.js에 적용하면 하위 모든 컴포넌트에 적용된다.
reset css 적용
import reset from "styled-reset"; const GlobalStyle = createGlobalStyle` ${reset} a{ text-decoration : none; color : inherit; } `;React에서 reset.css 적용은 모듈 설치와 ${reset}만으로 reset 스타일이 적용된다.
styled-components 사용하여 스타일 적용
const elDiv = styled.div` margin: 40px; `; const elH2 = styled.h2` width: 200px; margin: 0 auto; text-align: center; `; const App = () => { return ( <elDiv> <elH2>hello</elH2> </elDiv> ); };
elDiv와elH2처럼 변수로 지정하고 값으로styled.태그명과 하이픈 표기법으로 작성한다.
App 컴포넌트에elDiv태그는div이고margin:40px이 적용된 태그이다.
CSS 파일로 스타일 적용
import "./App.css"; import Menu from './Menu'; function App(){ return ( <Menu /> ) }일반적인 HTML, CSS 와 동일한 방법이지만 React에는 컴포넌트라는 개념이 있다. 위와 같은 코드에 App.css와 Menu.css 파일이 있고 스타일이 작성되어 있다고 가정하면 App.css 스타일은 무시되고 자식 컴포넌트인 Menu.css 스타일이 적용된다. 즉, 부모 컴포넌트의 css는 무시되고 자식 컴포넌트의 css 스타일이 적용된다.
module.css 파일로 스타일 적용
import "./App.module.css"; import Menu from './Menu'; function App(){ return ( <Menu /> ) }Menu.module.css가 작성되어 있다고 가정했을 때, App.module.css는 App.js 컴포넌트에만 적용되고 Menu.module.css는 Menu.jsx 컴포넌트에만 적용된다. 여기서 주의할 점은 컴포넌트 이름과 .module.css 파일 이름을
Menu.module.css와Menu.jsx처럼 일치시켜야 된다.
1-4 Route
🕵️♀️Route란?
페이지를 새로 불러오지 않는 상황(SPA)에서 URL에 따라 컴포넌트를 하나의 페이지에서 렌더링 해주는 라이브러리이다. 즉, 간단히 말해서 길잡이 역할을 해주는 라이브러리이다.import { BrowserRouter, Route, Link } from "react-router-dom"; function Test() { return ( <BrowserRouter> // Link를 사용한 컴포넌트 연결 <Link to=""> 홈 </Link> <Link to="/one"> 현재시간 </Link> <Link to="/two"> 안녕 </Link> <Link to="/three"> 소개 </Link> // Route를 사용한 컴포넌트 연결 <Route path="/" exact component={Index} /> <Route path="/one" exact component={One} /> <Route path="/two" exact component={Two} /> // render와 component는 결과 동일, 단 render는 props 전달 가능 <Route path="/Three" exact render={() => <Three name={v}/>} /> </BrowserRouter> ); }Route와 Link는 파트너라고 보면된다.
Link는<a>태그와 비슷한 역할을 한다. to 속성에 작성된 경로로 URL를 바꾼다. 단, page를 새로고침 하지 않는다.
Route는 path에 작성된 경로 요청이 오면 컴포넌트 속성에 작성된 컴포넌트를 렌더링한다.
exact는 path에 적힌 경로가 정확히 일치할 때만 해당 컴포넌트를 렌더링하는 속성이다.
만약, exact가 없다면 모든 곳에 "/" 이 포함되기 때문에 모든 컴포넌트에 Index 컴포넌트가 중복으로 렌더링되는 문제가 발생한다. 이를 방지하기 위해 exact를 사용한다.
1-5 Hook 기본 개념
🕵️♀️Hook 이란
기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용하는 것이 Hook이다.
- useState : 변수의 변화를 감지하여 재랜더링 수행
- useEffect : 배열의 묶인 state를 감지하여 재랜더링 수행
- useRef : 레퍼런스를(특정 객체에 접근) 사용하기 위해 사용.
- useMemo : 연산이 많이 들어가는 객체를 저장해 두었다가 사용하기 위한 훅
✍ 주의
값에 따라 렌더링 순서가 변경되면 안 되기 때문에 함수의 최상위 레벨에서 사용하고 조건문으로 Hook을 할당하면 안 된다.
