import { useState } from "react";
function App() {
const name = "홍길동";
const num = 100;
const arr = [1, 2, 3, 4];
const obj = { name: "유저", age: "20", addr: "서욿시" };
//useState(data) : state를 만들면 길이가 2인 배열을 리턴
const [name2, setName2] = useState("홍길동2");
const [num2, setNum2] = useState(200);
const [arr2, setArry2] = useState([100, 200, 300, 400]);
const [obj2, setObj2] = useState({ name: "유저", age: "20", addr: "서욿시" });
// const name2 = useState("홍길동2");
//name2[0] => getter의 역확
//name2[1] => setter의 역활
//desrtucturing 문법을 주로 사용
// const [name3, setName] = useState("홍길동3"); //인덱싱을 해서 가져오지않아도 됨!!
//console.log(name2[0]);
// console.log(name3);
/////////////////////////////////////////////////////////////////////
function testFunction1() {
const div1 = document.querySelector("#div1");
div1.innerText = "변경3"; //함수를 미리만들어놓고 밑에서 사용
}
const testFunction2 = function () {
const div1 = document.querySelector("#div1");
div1.innerText = "변경4"; //함수도 저장이됨!!
};
const testFunction3 = () => {
const div1 = document.querySelector("#div1");
div1.innerText = "변경5"; //function없이 그냥 에로우로 걸어도됨!!!!
};
//////가장 선호하는 방법?!
const testFunction4 = () => {
const div1 = document.querySelector("#div1");
div1.innerText = "변경6";
};
//////////////////////////////////////////////////
let str3 = "일반 문자열";
const [str4, setStr4] = useState("state문자열");
const changeStr3 = () => {
//str3 변수값을 변경 -> 화면에 str3을 출력한는 부분도 같이 변경
str3 = "자바스크립트 변수 변경";
//자바스크립트 변수를 변경하더라도 이미 만들어진 HTML은 따로 변경해줘야함
const div3 = document.querySelector("#div3");
div3.innerText = str3;
};
const changeStr4 = () => {
//str4 state값을 변경 -> 화면에 변경돤 str4 state출력
//state는 값을 변경할때 반드시 변경용 함수를 사용
setStr4("state값 변경"); //전용함수를 씀//값변경
//const div4 = document.querySelector("#div4");//화면에 변경
//div4.innerText = str4;->state는 자동으로 값이 바뀌면 화면도 변경
/*
state의경우 값을 변경함수를 이용해서 변경하면 화면을 처리하는 로직을 따로 만들지않아도 자동으로 반영
->리액트에서 우리가 작성한 jsx를 실제 화면으로 변경(html로변경)하는 작업을 랜더링이라고함
->일반변수는 최초 작성한 대로 랜더링이 일어나면 끝
->state는 값을 변경함수로 변경하게되면 해당부분은 재랜더링!부분 새로고침(바뀐값이 자동으로 화면에 적용)
*/
};
const [num4, setNum4] = useState(1000);
const [arr4, setArr4] = useState([10, 11, 12, 13]);
const [obj4, setObj4] = useState({
name: "유저4",
age: 44,
addr: "서울시 강남구",
});
const changenum4 = () => {
setNum4(2000);
};
const changeArr4 = () => {
//객체또는 배열state를 수정하는 방법
//1. 기존객체또는 기존 배열을 깊은 복사
const newArr = [...arr4]; //독립적
//2. 복사된 배열을 수정
newArr[1] = 101;
newArr[2] = 102;
//3.수정완료된 배열을 변경함수로 적용
setArr4(newArr);
//기존객체를 복사하지않고 완전히 새로운 배열을 변경함수로 넣어도 상관없음
};
const changeArr5 = () => {
const testArr = [100, 200, 300, 400];
setArr4(testArr);
};
const changeObj4 = () => {
//1.객체 깊은 복사
const newObj = { ...obj4 };
//2. 변경할 데이터를 변경
newObj.age = 50;
//3.변경함수를 통해서 atate변경
setObj4(newObj);
};
const changeObj5 = () => {
const testObj = { name: "유저5", age: 100, addr: "경기도" };
setObj4(testObj);
};
return (
<div className="App">
<h1>자바스크립트 데이터를 화면에 표현</h1>
<hr></hr>
{/*
자바스크립트 변수에 잇는 데이터를 출력하기위해서 mustache(콧수염) {변수}를 사용함
*/}
<div>{name}</div>
<div>{num}</div>
<div>
{name}
{num}
</div>
<ul>
<li>{arr[0]}</li>
<li>{arr[1]}</li>
<li>{arr[2]}</li>
<li>{arr[3]}</li>
</ul>
<ul>
<li>{obj.name}</li>
<li>{obj.age}</li>
<li>{obj.addr}</li>
</ul>
<hr></hr>
<h1>state를 이용해서 화면에 출력</h1>
{/*
state:리엑트에서 유동적인 데이터를 다루기 위한 객체
사용방법:
1.state를 import
- import { useState } from "react";
2. desrtucturing문법과 hook을 이용해서 데이터 생성
- const [data, setData] = useState("데이터");
- desrtucturing : 배열대이터를 일반 변수처럼 사용하기위한 문법
-> userState는 길이가 2인 배열을 리턴하는데 첫번때 데이터를 date변수에 e두번재 데이터를 setData 뱐수에 저ㅈ징
- userState(데이타) -> state hook ->매개변수로준 데이터를 state로 만드는 기능
->react hooks : 리액트 클래스형 컴포넌트를 바로사용할수있게 해주는 라이브러리로 리액트 16.8버전에 새로 추가됨
*/}
<div>{name2}</div>
<div>{num2}</div>
<ul>
<li>{arr2[2]}</li>
<li>{arr2[3]}</li>
</ul>
<ul>
<li>{obj2.name}</li>
<li>{obj2.addr}</li>
</ul>
<hr></hr>
<br></br>
<h1>JXS에서 이벤트를 적용하는 방법</h1>
{/*
인라인 이벤트
onClick(카멜) 속성에 함수를 연결
onClick={function(){
}}
onClick={()=>{
}}
()=> {} : 함수를 정의하는 형태로 화살표함수(arrow function)
*/}
{/*1.인라인 로직 구현 */}
<div id="div1">클릭이벤트 확인용 div</div>
<button
onClick={function () {
const div1 = document.querySelector("#div1");
div1.innerHTML = "변경1";
}}
>
클릭1
</button>
{/*2.인라인 로직구현(arrow function 사용) */}
<button
onClick={() => {
const div1 = document.querySelector("#div1");
div1.innerText = "변경2";
}}
>
클릭2
</button>
{/*3. 만들어진 함수를 사용(선언적함수 사용) */}
<button
onClick={() => {
testFunction1();
}}
>
클릭3
</button>
{/*변수에 저장되에있는 함수를 사용 */}
<button
onClick={() => {
testFunction2(); //변수여도 변수에 저장된 함수를 사용하니까 ();함수처럼 사용
}}
>
클릭4
</button>
{/*5.변수에 저장되에있는 함수를 사용(arrow function사용) */}
<button
onClick={() => {
testFunction3();
}}
>
버튼5
</button>
{/*6.변수에 저장되어잇는 함수를 사용(함수이름으로 연결) */}
<button onClick={testFunction4}>버튼6</button>
{/*
다른 이벤트도 동일한 형태로 적용
단, javascript 이벤트랑 약간 다른부분이있음 (keyup->change)
*/}
<hr></hr>
<br></br>
{/*
일반 js변수와 state 비교
*/}
<h1>js변수와 state 비교</h1>
<div id="div3" onClick={changeStr3}>
{str3}
</div>
<div id="div4" onClick={changeStr4}>
{str4}
</div>
<p id="p4">{num4}</p>
<ul>
<li>{arr4[0]}</li>
<li>{arr4[1]}</li>
<li>{arr4[2]}</li>
<li>{arr4[3]}</li>
</ul>
<ul>
<li>{obj4.name}</li>
<li>{obj4.age}</li>
<li>{obj4.addr}</li>
</ul>
<button onClick={changenum4}>숫자 state 변경하기</button>
<button onClick={changeArr4}>배열 state 변경하기</button>
<button onClick={changeArr5}>배열 state 변경하기2</button>
<button onClick={changeObj4}>객체 state 변경하기</button>
<button onClick={changeObj5}>객체 state 변경하기2</button>
</div>
);
}
export default App;