학습내용
- JavaScript Primitive Type, Reference Type
- JavaScript for, map, filter function
- JavaScript truthy, false
- props
- useState
- 하위 component에서 상위 component 값 변경
- Context
JavaScript primitiveType, reference type
- javascript에서는 Object type(array, function, object)을 제외한 type은 모두 primitive type이다.
- 따라서 primitive type에서는 CallByValue reference type에서는 CallByReference가 적용된다.
JavaScript truthy, falsy
- truth(true는 아니지만 true로 여겨지는 값)
1) true
2) {} , [] : 빈 객체, 빈 배열
3) 5 : 0이 아닌 숫자
4) "0", "false" : 비어있지 않는 문자열 - false(false는 아니지만 false로 여겨지는 값)
- false
- 0, -0
- null, undefined , NaN
- "", '' : 빈 문자열
props
-
React에서 component에서 하위 component로 데이터를 전송 하고 싶을때 사용하는 방법이다.
-
tag 내부에 Attribute에 아래와 같이 전달 가능하며 tag 사이에 넣어서도 전달 가능하다.
//App.js
function App() {
console.log("App");
return (
<div className='ViewGood'>
<Header02/>
<View02 data1="[props로]" data2="[상위에서]">[하위로 데이터전송]</View02>
<Footer02/>
</div>
);
}
export default App;
- 하위 components 아래와 같이 props를 통해 상위에서 보낸 data를 받아 올 수 있으며 하위 component에서 props를 통해 상위 component에서 보낸 값은 변경 불가능하다.
//View02.js
const View02 = (props) => {
console.log("view02");
return (
<div className='ViewGood'>
<h1>[View02 Component]</h1>
<ul>
상위컴포넌트 데이터받기 : data1 = {props.data1} data2 = {props.data2}
상위컴포넌트 데이터받기 : children={props.children}
</ul>
</div>
);
};
export default View02;
useState
- Destructuring Assignment을 사용하여 편리하게 값을 생성하고 변경해주는 function이다.
//userState를 통해 product와 users object를 생성하고, setFunction 생성
function App() {
const[no, setNo] = useState(1);
const[product, setProduct] = useState(
{no:100, name:'tv'}
);
const [users, setUsers] = useState(
[{id:'user1', pwd:1},
{id:'user2', pwd:2}]
);
return (
<div className='ViewGood'>
<h1>03state연습</h1>
<li>{no}</li>
<li>{product.no} {product.name}</li>
<li>{users[0].id} {users[0].pwd}</li>
<li>{users[1].id} {users[1].pwd}</li>
<Header031 no={no} product={product} users={users}></Header031><hr/>
<View02 data1="[props로]" data2="[상위에서]">[하위로 데이터전송]</View02><hr/>
<Footer02/>
</div>
);
}- useState를 통해 생성된 set~() function을 실행시키면 자동으로 userState를 통해 생성된 setFunction에 대응되는 object을 사용하는 태그 값을 변경한다.
function App() {
const[no, setNo] = useState(1);
const[product, setProduct] = useState(
{no:100, name:'tv'}
);
const [users, setUsers] = useState(
[{id:'user1', pwd:1},
{id:'user2', pwd:2}]
);
const changeNo =()=>{
console.log("App changeNo");
setNo(no+1);
}
const changeProduct=()=>{
console.log("App changeProduct");
let newNo = product.no + 1;
let newName = product.name + newNo;
let newProduct = {no:newNo, name:newName};
setProduct(newProduct);
}
const changeUsers=()=>{
console.log("App changUsers");
let newUser = [{id:'user3', pwd:3}];
let newUsers = [...users, ...newUser];
}
return (
<div className='ViewGood'>
<h1>03state연습</h1>
<li>{no}</li>
<button onClick={changeNo}>숫자 1씩 증가</button>
<button onClick={changeProduct}>상품 정보 수정</button>
<button onClick={changeUsers}>회원정보 추가</button>
</div>
);
}
export default App;
하위 component에서 상위 component 값 변경
- 상위 component에서 props를 통해 단순히 값뿐 아니라 상위 component의 function을 전달 할 수 있다.
- 이를 통해 하위 component에서는 props를 통해 전달된 상위 component의 function을 통해 상위 component의 값을 변경 할 수 있다.
function App() {
const[no, setNo] = useState(1);
const[product, setProduct] = useState(
{no:100, name:'tv'}
);
const [users, setUsers] = useState(
[{id:'user1', pwd:1},
{id:'user2', pwd:2}]
);
const changeNo =()=>{
console.log("App changeNo");
setNo(no+1);
}
const changeProduct=()=>{
console.log("App changeProduct");
let newNo = product.no + 1;
let newName = product.name + newNo;
let newProduct = {no:newNo, name:newName};
setProduct(newProduct);
}
const changeUsers=()=>{
console.log("App changUsers");
let newUser = [{id:'user3', pwd:3}];
let newUsers = [...users, ...newUser];
setUsers(newUsers);
}
return (
<div className='ViewGood'>
<li>{no}</li>
<button onClick={changeNo}>숫자 1씩 증가</button>
<button onClick={changeProduct}>상품 정보 수정</button>
<button onClick={changeUsers}>회원정보 추가</button>
{/* 하위 component에 function 전달*/}
<Header043 no={no} product={product} users={users} changeProduct={changeProduct} changeNo={changeNo} changeUsers={changeUsers}></Header043>
</div>
);
}
export default App;
- 하위 component에서 props를 통해 전달된 function을 사용하여 상위 component를 변경
const Header043 = (props) => {
console.log("Header043");
console.log(props);
const[no,setNo] = useState(props.no);
const[product,setProduct] = useState(props.product);
const[users,setUsers] = useState(props.users);
const parentsChangeNo=()=>{
props.changeNo();
}
const parentsChangeProduct=()=>{
props.changeProduct();
}
const parentsChangeUsers=()=>{
props.changeUsers();
}
return (
<header className='ViewGood'>
<h1>[Header042 Component]</h1>
<li>{no}</li>
<button onClick={parentsChangeNo}>숫자 1씩 증가</button>
{productView}
<button onClick={parentsChangeProduct}>상품 정보 수정</button>
{usersView}
<button onClick={parentsChangeUsers}>회원정보 추가</button>
</header>
);
};
export default Header043;context
- 매번 props를 통해서 값은 전달하는 것이 아닌 context를 통해서 Object Scope처럼 값을 전달 할 수 있다.
//component에서 사용 할 context를 생성한다.
import { createContext } from "react";
console.log("Context05");
const NoContext = createContext(1);
export default NoContext;
const ProductContext = createContext({no:100, name:'tv'});
export {ProductContext};
export const UsersContext = createContext([{id:'user1', pwd:1}, {id:'user2', pwd:2}]);import { useContext} from "react";
import ViewOther from "./ViewOther05";
import NoContext, {UsersContext, ProductContext} from "./Context05";
const View05=()=>{
console.log("View05");
//userContext를 통해 context의 값을 가져온다
const no = useContext(NoContext);
const product = useContext(ProductContext);
const users = useContext(UsersContext);
return(
<div className="ViewGood">
<h1>[View05 Component]</h1>
<br/>
no : {no}<br/><br/>
product.no : {product.no} product.name : {product.name}
{
users.map((user, index)=>{
return <li key={index}>{users[index].id} {users[index].pwd}</li>
})
}
<ViewOther/>
</div>
);
}
export default View05;
Backend Developer