Component
리액트를 하면서 계속 컴포넌트라는 말이 나온다. 어제 UI를 구성해주는 구성 요소라는건 알겠는데 그래서 그걸 뭐👀? ?
function Footer () {
return (
//☝️여기까지 자바스크립트
//👇리액트
<footer>
<h1>footer</h2>
</footer>
//☝️여기까지 리액트
//👇자바스크립트
);
}자바스크립트에서는 이렇게 적어주면 오류가 난다.
하지만 리액트에서는 JSX 문법을 사용해주기 때문에 적합하다고 한다.
여기서 JSX가 뭘까 ➡️ 확장된 자바스크립트의 문법❗
💡JSX의 중괄호 안에는 자바스크립트의 표현식만 들어 갈 수 있다.
function Footer () {
const myName="조아라";
return (
<footer>
<h1>안녕 내 이름은 {myName}이야</h1>
</footer>
);
}<h1>안녕 내 이름은 {myName}이야</h1>를 보면 {}안에 변수명이 들어간다.
➡️ 자바스크립트 표현식
그렇다면 자바스크립트의 표현식은 뭘까🤔❔
- 그냥 값(리터럴)
- 변수 이름
- 연산식
⚠️ JSX 주의 사항 ⚠️
1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.
2. 숫자, 문자열, 배열 값만 렌더링 된다.(조건문, 반복문 ❎)
3. 모든 태그는 닫혀 있어야 한다.
4. 최상위 태그는 반드시 하나여야 한다.
하나의 브라우저 안에 리액트로 만든다면, Component폴더에 헤더,메인,푸터를 나눠서 만들어 놓고 export하고 App.jsx에서는 그걸 import받는다.
- export default App;
ex)export default App; - import (컴포넌트명) from "./(출처)";
ex)import Header from "./components/Header";
import Main from "./components/Main";
import Footer from "./components/Footer";
import Button from "./components/Button";
.jsx라는 확장자 명은 써주지 않아도 좋다.
Props
컴포넌트에 값을 전달 할 수 있는 것 ! 이라고 보면 좋은데 예를 들자면,
같은 모양의 버튼인데 안에 들어가는 텍스트만 다르다고 생각해보자!
function App() {
return (
<>
<Button text={"메일"} />
<Button text={"카페"} />
<Button text={"블로그"} />
</>
);
}이렇게 적어줄 수 있을것이다. 버튼이라는 컴포넌트 안에 text라는 props가 들어가 있다😯
Event handling
웹 내부에서 발생하는 사용자의 행동들을 처리해주는 방법을 알아보자
==> 합성 이벤트 (모든 웹 브라우저의 이벤트들을 통일한 형태)
🤔 합성 이벤트가 아니라면, 크로스 브라우징 이슈(브라우저 별 스펙이 달라서!) 발생❗
const Button = ({ text, color, children }) => {
// 이벤트 객체
const onClickButton = (e) => {
console.log(e);
console.log(text);
}
return (
<button
onClick={onClickButton}
// onMouseEnter={onClickButton}
</button>
);
};
export default Button;아까 만든 버튼에 이벤트를 적용한다고 하면, onClickButton로 변수를 선언해주고 그 안에 화살표 함수로 text가 콘솔에 출력되도록 했다. 그걸 버튼 태그 안에 바로 onClick={onClickButton}주면 잘 출력되는 걸 볼 수 있다😊
혹시 리액트에서 CSS는 어떻게 적용해?
리액트에서는 CSS를 적용할 때
1. 바로 태그 안에다가 style={{}}를 주는 방법
2. css컴포넌트를 만들어서 그 안에 css를 작성해주고 export, import한 뒤
태그에 className을 적어주면 된다 !
import Button from "./components/Button";
function App() {
const buttonProps = {
text: "메일",
color: "red",
a:1,
b:2,
c:3,
};
return (
<>
<Button {...buttonProps} />
<Button text={"카페"} />
<Button text={"블로그"} >
<Header />
</Button>
</>
);
}
export default App;버튼에 전개구문을 사용해서 정리해 주었다. 일단 메일 버튼에 색이 들어가 있는데, 이는 아래 코드처럼 적어줄 수 있다.
const Button = ({ text, color }) => {
return (
style={{color: color}}>
{text} - {color.toUpperCase()
</button>
);
};
Button.defaultProps = {
color:"black",
};
export default Button;이렇게 코드를 보면 버튼에 구조분해할당을 주어서 스타일을 적용 시켰다.
저렇게 해주면 {text:text} 이런 식으로 적어 줄 필요 없이 {text} 적어 줄 수 있다.
그럼 메일 버튼 외에 다른 버튼에는 색이 없는데 에러 안나?😯
==> 에러는 나지 않고 대신에 버튼에 -이렇게 대쉬가 생긴다.
그래서 버튼에 디폴트 프롭스를 주어서 색을 검정으로 바꿔주면,
이런 형태로 잘 나오게 된다❗❗❗❗
자식 요소는 뭐야?
children이라고 불리는 자식 요소는 다음과 같이 만들어 줄 수 있다.
import Button from "./components/Button";
function App() {
const buttonProps = {
text: "메일",
color: "red",
a:1,
b:2,
c:3,
};
return (
<>
<Button {...buttonProps} />
<Button text={"카페"} />
<Button text={"블로그"} >
<Header />
</Button>
</>
);
}
export default App;
const Button = ({ text, color, children }) => {
// 이벤트 객체
const onClickButton = (e) => {
console.log(e);
console.log(text);
}
return (
<button
onClick={onClickButton}
// onMouseEnter={onClickButton}
style={{color: color}}>
{text} - {color.toUpperCase()}
{children}
</button>
);
};
Button.defaultProps = {
color:"black",
};
export default Button;여는 버튼 태그 안에 {Header /}라는 자식 컴포넌트를 넣어주고 버튼 안에 넣어주려고 {children}을 넣어주었다. 그렇게 되면 블로그 버튼의 자식 요소로 헤더가 들어가게 된다.
