ex) Props 예제연습
component
L hello.js
pages
L user.js
- 두개의 폴더를 만들고 폴더 안의 각각의 파일을 만들었다.
user.js
import Hello from "../components/hello"
const User = () => {
const user = "오렌지";
const isLover = true;
const color = "red";
return(
<>
<Hello name="오렌지"/>
// 오렌지 라는 이름을 name 이라는 이름으로 전달.
<Hello name="반하나" color="yellow" />
<Hello name={user} color={color} isLover={isLover} />
</>
)
}
export default User;
-> user 의 변수를 하위에 있는 에 전달하고 싶다.
상위 컴포넌트에서 하위 컴포넌트에 전달 하는것을 props 라고 한다.
세번째 "Hello" 라는 컴포넌트에 props 를 전달 하였다.
hello.js
const Hello = (props) => {
console.log(props)
return(
<div>
안녕하세요{props.name}님!
{props.isLover ? <span>❤</span> : "📍"}
</div>
)
}
export default Hello;-> props.isLover 가 있으면 true , 따라 "님!" 옆에❤ 가 나타난다.
"님!"옆에 📍 이모티콘이 보여진다.
출력결과
-> 3번째만 ture 값이니 3번째 컴포넌트에서만 ❤ 이 출력 되었다.
📌 컬러값을 넣고 싶을때!
const Hello = (props) => {
console.log(props)
return(
<div style={props.color && {color: props.color}}>
안녕하세요{props.name && props.name}님!
{props.isLover ? <span>❤</span> : "📍"}
<span style={{ color:"red", fontSize: "50px"}}>반갑습니다.</span>
</div>
)
}
export default Hello;-> style 안에 중괄호로 넣어줘야 한다. 중괄호를 넣는 이유는
<span style={{ color:"red", fontSize: "50px"}}>반갑습니다.
첫번째의 중괄호는 변수를 사용 하기 위해서 하는것이고 두번째 중괄호는 객체 값을 받기 위해서
쓰는것.
ex) 비구조화 할당을 통해 받아오기.
const Hello = ({name, isLover, color }) => {
console.log(Hello)
return(
<div style={color && {color: color}}>
안녕하세요{name}님!
{isLover ? <span>❤</span> : "📍"}
<span style={{ color:"red", fontSize: "50px"}}>반갑습니다.</span>
</div>
)
}
export default Hello;-> user.js 에 있는
const user = "오렌지";
const isLover = true;
const color = "red";
이 변수들이 porps 가 들어갈 ()안에 {} 중괄호를 넣어 ,
비구조화 할당으로 가져온다. (매개변수값)
HOOK 함수
-> react 에서 상태 변경, 즉 가상돔의 상태를 변경할 수 있는 함수.
그에 따른 생명 주기를 통해 다양한 이벤트를 실행할 수 있는 함수.
react초기 상태
class형 컴포넌트를 사용
const 컴포넌트명 = () => {
}
class 컴포넌트명 extends Components{
...
}
라이프 사이클(생명주기.)
(페이지가 처음 열렸을때 ~ 페이지가 닫혔을 때까지)
이 사이에 일어나는 이벤트 값 변경 등을 관리
class 는 다양한 기능을 상용할 수 있지만 기계와 사용자를 혼돈시킨다.
숙련된 React 개발자 조차도 Class를 통한 React 의 완벽한 이해는 힘듬.
-> 따라,"함수형 컴포넌트"가 등장!
자연스럽게 생명주기(라이프 사이클)이 사라지고 hook 함수가 나타나였다.
HOOK함수
1. useState
- Hooks 의 상태 관리 함수
- 컴포넌트에서 바뀌는 값을 관리
- 값이 바뀐 것을 감지하여 랜더링
2. useRef
- js에서 getElementById, querySelector 같은 DOM SELECTOR 함수처럼
- React에서 DOM에 접근하게 되는 일이 생긴다면 접근하게 해주는 Hooks 함수
3. useMemo
- 연산된 값(결과)를 반환하여 재사용할 수 있게 해주는 Hooks 함수
4. useCallback
- 특정 함수를 새로 만들지 않고 재사용할 수 있게 해주는 Hooks 함수
(useMemo와 Callbcack을 사용해서 어떻게 최적화를 할 수 있는지데 대해)
메모이제이션
- 만약 어떠한 연산이나 함수가 복잡해서 결과가 오래걸린다 (30초)
- 리액트는 상태가 바뀌면 랜더링, 하지만 랜더링 될 때 값이 바뀌지 않는 부분이라면 한번 더 실행해야할 필요가 있을까?
-따라, 값이 안바뀌는 연산이나 함수를 랜더링이 되더라도 재생성하지 않도록 값이나 함수를 재사용 즉,랜더링 시 필요 없는 연산의 시간을 줄여주기 위해 사용
5. useEffect
- 마운트 / 언마운트 시 특정 작업(함수나 이벤트)를 실행할 때 사용하는 Hook 함수
- 의존성 배열의 값이 바뀌었을 때도 함수나 이벤트를 실행
마운트: 화면이 처음 랜더링 될 때
언마운트: 화면이 사라질 때
useState 사용해보기.
🐾components
L state.js
import {useState} from "react"
const State = () => {
const [state, setState] = useState("state기본값입니다.")
return(
<div>
{state}
</div>
)
}
export default State;-> useState("변수의 기본값입니다.") 괄호 안에 들었는 값이 state 값으로
들어갔고 이 값이 하나의 변수가 되어 사용할수 있다.
useState 값이 return 값으로 배열 두개의 값으로 들어갈수 있다.
📌사용법
const[변수명, 변수 값을 바꿔줄 함수명] = useaState("변수의 기본값")
🐾pages
L hook.js
import State from '../components/state';
const Hook = () => {
return(
<div>
<State/>
</div>
)
}
export default Hook;-> Pages 폴더를 만들어서 컴포넌트 들을 모아두었다.
HOOK 변수에 State 값을 넣었다.
🐾App.js
import './App.css';
import Hook from './pages/hook';
function App() {
return (
<Hook/>
);
}
export default App;-> App.js 에서 Hook 에 대한 컴포넌트를 보여 준다.
출력 결과
-> App.js 에 있는 Hook의 컴포넌트가 출력된다.
ClickEvent 넣기
import {useState} from "react"
const State = () => {
const [state, setState] = useState(" 변수 기본값입니다.")
const onChangeText = () => {
setState("클릭이벤트 넣기")
}
return(
<div onClick={onChangeText}>
{state}
</div>
)
}
export default State;-> {onChangeText} 에 대한 함수를 정의해준후
setState 값으로 기존의 변수 값을 바꿔준다. 그 후
onClick={onChangeText} 변수를 넣어준다.
div를 클릭하면, state의 변수명이 setState 안에 있는 변수명으로 바뀐다.
출력결과
