ReactJS Course [3]
리액트에서 CSS 사용하기
import "./App.css";
function App() {
return (
<div className="App">
<h1 className="name"> Pedro </h1>
</div>
);
}
export default App;
이 코드를 보면 App.css라는 파일을 불러오고 있다는 걸 알 수 있다. 이 css파일은 App.js의 스타일을 관리한다. css를 사용하고 싶다면 파일 위치를 가져와서 import하면 해당 파일에서 사용할 수 있게 된다.
Module Stylesheets
위처럼 import하는 방법 외에도 모듈 스타일시트를 사용하는 방법도 있다.
App.css가 아니라 App.moudle.css가 있다고 생각해보자.
그런 경우에는
import sytles from "./App.module.css";
function App() {
return (
<div className={styles.App}>
<h1 className={styles.App}> Pedro </h1>
</div>
);
}
export default App;
이렇게 해도 import하는 것과 똑같이 작동한다.
Conditional Rendering
여기서는 전에 우리가 공부한 삼항연산자가 등장한다. 만약 조건을 만족하면 이거고, 아니면 저거다. 를 나타내는 연산자이다.
리액트에서 조건부 렌더링을 하는 가장 쉬운 방법은 if문을 이용하는 것이다.
import sytles from "./App.module.css";
function App() {
return (
const age = 19;
if (age>=18){
return <h1>overage</h1> ;
}
else {
return <h1>underage</h1> ;
}
);
}
export default App;
이렇게 하면 나이가 18살 이상인 경우 overage, 미만이면 underage를 보여준다. 그러면 이 연산을 삼항연산자로 나타내면 어떻게 될까?
import sytles from "./App.module.css";
function App() {
const age = 19;
return <div className = "App">{age >=18 ? <h1> overage </h1> : <h1> underage </h1>}</div>
}
export default App;
색깔 바꾸기 (css 적용)
위의 코드에 한 줄을 더 추가해서 isGreen이라는 boolean 변수가 추가되었다고 생각해보자. 그리고 이 변수가 참이면 글씨는 초록색이고, 아닐 경우 글씨는 빨간색(디폴트)으로 보여진다.
마찬가지의 원리로 isGreen이 참이면 버튼을 보여주고 아닐 경우 버튼을 보여주지 않는 방식도 가능하다.
import sytles from "./App.module.css";
function App() {
const age = 19;
cosnt isGreen = true;
return(<div className = "App">
{age >=18 ? <h1> overage </h1> : <h1> underage </h1>}
<h1 style={{color: isGreen && "green" : "red"}}>isGreen?</h1>
{isGreen && <button> This is a button </button>}
</div>
);
}
export default App;
React에서 list 사용하기
배열
import "./App.css";
function App() {
const names = {"Pedro", "Jake", "Jessica", "Mike", "Dustin"};
return (
<div className="App">
<h1> {names[0]}</h1>
</div>
);
}
export default App;
우리가 이름 배열을 가지고 있고, 그것을 보여주고 싶다고 생각해보자. 만약 저 위의 코드처럼 0번 이름을 보여주는 것에서 그치지 않고, 모든 이름들을 다 보여주고 싶다면 어떻게 해야할까?
자바스크립트의 배열 함수인 forEach를 쓸 수도 있지만, 오늘 사용할 것은 map()이다.
map 함수는 배열에 들어있는 각각의 요소를 집어서 각각에 대한 요소를 변경할 수 있다는 장점이 있다.
map 함수는 인자로 callback함수를 필요로 한다.
콜백 함수는 이름이 없는 익명 함수로, value와 key를 받아서 map 다음으로 실행할 것들을 나타낸다.
key는 예를 들면 각 배열의 index라고 할 수 있을 것이고, value는 각 배열의 실제 내용, 즉 Jake, Pedro 같은 이름이 될 것이다.
이 value와 key는 콜 백 함수 내에서 원하는 대로 이름 붙여 쓸 수 있다. 아래 코드에서는 value를 알아보기 쉽게 name으로 명명했다.
*jsx나 html 사이에 js를 쓰고 싶으면 항상 {}로 감싸야 된다는 것을 잊지 말자.
import "./App.css";
function App() {
const names = {"Pedro", "Jake", "Jessica", "Mike", "Dustin"};
return (
<div className="App">
{names.map((name, key) => {
return <h1 key={key}> {name} </h1> //key를 넘겨줌
})}
</div>
);
}
export default App;
객체
import "./App.css";
function App() {
const users = [
{name: "Pedro", age: 21 },
{name: "Jake", age:25},
{name: "Jessica", age:45 },
];
return (
<div className="App">
{names.map((name, key) => {
return <h1 key={key}> {name} </h1> //key를 넘겨줌
})}
</div>
);
}
export default App;
우리는 이제 유저의 이름과 나이를 가진 객체 배열을 가지고 있다. 이름과 나이를 화면에 표시하려면 어떻게 해야 할까?
import "./App.css";
function App() {
const users = [
{name: "Pedro", age: 21 },
{name: "Jake", age:25},
{name: "Jessica", age:45 },
];
return (
<div className="App">
{users.map((user, key) => { //users배열을 매핑하도록 코드 변경
return <div> {user} </div>;
})}
</div>
);
}
export default App;
안타깝게도 위 코드는 작동하지 않는다. 왜냐하면 {user}만 넘겨주는 건 배열이었으면 가능하지만, 객체의 경우 user.name, user.age 처럼 객체의 무엇을 표시할 것인지를 명시해주어야 하기 때문이다.
그리고 이어서 생각해보면, return하는 div태그 안에 {user.name}, {user.age}를 넣는 대신 유저의 정보를 표시해주는 컴포넌트를 작성해서 리턴시켜줄 수도 있다.
import "./App.css";
function App() {
const users = [
{name: "Pedro", age: 21 },
{name: "Jake", age:25},
{name: "Jessica", age:45 },
];
return (
<div className="App">
{users.map((user, key) => {
return <User name={user.name}, age={user.age}/>;
})}
</div>
);
}
const User = (props) => {
return (
<div> {props.name} {props.age} </div>
);
}
export default App;
이 때 컴포넌트에서 props를 받아오는 방법은 뭘까?
User 컴포넌트를 사용할 때, 태그 안에서 props에 들어갈 부분을 할당시켜 주는 것이다.
<User name={user.name}, age={user.age}/>이렇게 하면 컴포넌트에서 필요로 하는 props와 map 함수에 전달된 객체들의 요소를 연결해줄 수 있다.
https://www.youtube.com/watch?v=N6E9ZsiWUyQ&list=PLpPqplz6dKxW5ZfERUPoYTtNUNvrEebAR&index=4
