2023.04.18 - [프론트엔드/react] - React (3) - Set State, Good React!
* React (3) 코드에서 더욱 편하게 변경하기.
ㄴ 변경된 데이터를 보여주기 위해 render 함수를 추가 호출해야 한다.
ㄴ 데어타가 바뀔때마다 render함수를 호출해야한다.
ㄴ 변경되는 값이 많을 때 계속 render함수를 불러와야해서 불편함.
(파일이 많거나, 폼, 로그인, 알림, 비디오 플레이어 등등 다룰때 계속 render을 불러와야한다)
React (3) - Set State, Good React!
DOCTYPE html> const root = document.querySelector("#root"); let counter = 0; function countUP() { counter = counter + 1; render(); } function render() { ReactDOM.render(, root); } const Container = () => ( Total clicks: {counter} Click me ); render(); * JS
juokey.tistory.com
[ 자동으로 render되는 기능으로 코드를 작성 ]
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.querySelector("#root");
function App() {
const data = React.useState(0);
console.log(data);
return (
<div>
<h3>Total clicks: 0</h3>
<button>Click me</button>
</div>
);
};
ReactDOM.render(<App />, root);
</script>
</html> |
| * const data = React.useState(0); -> [0, f] 0 : 여기서는 counter라는 data f : counter 값을 변경할 수 있는 함수 |
let conter = 0; function counterUP () { counter = counter + 1; } 이거랑 같은 뜻임! |
array로된 값에 접근하기 위해서는 배열값 불러오는 형식을 사용하면 되지만 불편하다.
ex) <h3> Total Click : {data[0]} </h3>
* 쉽게 배열에 있는 요소들을 변수로부여하는 방법!
const food = ["tomato", "potato"]
const [myFavFood, mySecondFood] = food; |
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.querySelector("#root");
function App() {
const [counter, modifier] = React.useState(0);
return (
<div>
<h3>Total clicks: {counter}</h3>
<button>Click me</button>
</div>
);
};
ReactDOM.render(<App />, root);
</script>
</html>
* const [counter, modifier] : modifier, counter 값 변경해주는 함수 설정하기
//이렇게해도 render을 한번더 해줘야 한다//
const root = document.querySelector("#root");
function App() {
let [counter, modifier] = React.useState(0);
const onClick = () => {
counter = counter + 1;
console.log(counter);
};
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
};
ReactDOM.render(<App />, root);
modifie함수는 counter값을 받고 렌더를 자동으로 해준다.
통상적으로 modifer이름 대신 [변수이름, Set+변수이름]으로 사용한다.
counter값 [state] 바뀌면 새로운 값을 가지고 function App() [컴포넌트]가 리렌더링 된다.
//modifier는 자동으로 render을 해준다//
Const root = document.querySelector("#root");
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter+1);
};
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
};
ReactDOM.render(<App />, root);
'프론트엔드 > react' 카테고리의 다른 글
| React (5) - Converter, 삼항연산자 (0) | 2023.04.19 |
|---|---|
| React (4) - Set State, Modifier, Auto Render #2 (0) | 2023.04.18 |
| React (3) - Set State, Good React! (0) | 2023.04.18 |
| React (2) - React Event 동작 #2 (JSX) (0) | 2023.04.17 |
| React (2) - React Event 동작 #1 (0) | 2023.04.17 |
