혹시나 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장의 도움이 됩니다
// 상위 컴포넌트
function Tweets(){
return (
<ul className="container">
<UserLeeTweet />
<UserParkTweet />
</ul>
);
}
// 하위 컴포넌트 : 동일한 구조 내용만 다름
function UserLeeTweet(){
return (
<li>이OO의 게시글
<p>: 안녕하세요</p>
</li>
);
}
function UserParkTweet(){
return (
<li>박OO의 게시글
<p>: hello</p>
</li>
);
}
컴포넌트의 속성값(property)으로 함수의 전달인자처럼 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하여 동일한 컴포넌트로 다양하게 표현할 수 있음
-> 처음 렌더링 될 때, 컴포넌트의 초기값으로 사용
<Child attribute={value} />
// props(객체)의 key로 하위 컴포넌트의 속성, value는 속성값 적용
// 상위 컴포넌트
function Tweets(){
const userLee = "이OO"
const userPark = "박OO"
return (
<ul className="container">
<Tweet name={userLee} shortmsg={"안녕하세요"} />
<Tweet name={userPark} shortmsg={"hello"} />
{/* 전달하는 값을 속성으로 표기*/}
</ul>
);
}
// 하위 컴포넌트 : 전달인자로 객체 사용 -> 하나의 컴포넌트로 재활용 가능
function Tweet(props){
return (
<li>{props.name}의 게시글
<p>{": " + props.shortmsg}</p>
</li>
);
}
// <Tweet name={"이OO"} shortmsg={"안녕하세요"} />
function Tweet( { name, shortmsg } ){
return (
<li>{name}의 게시글
<p>{": " + shortmsg}</p>
</li>
);
}
/*---- props은 {name:"이OO", shortmsg:"안녕하세요" } ----*/
// let {name, age} = props
// let name = props.name;
// let shortmsg = props.shortmsg
: <Child> message to props</Child>
처럼 열고 닫는 컴포넌트 태그 안에 전달할 내용을 넣으면 하위컴포넌트에서 children
속성값으로 접근 가능
function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child>I'm the eldest child</Child>
</div>
);
};
function Child(props) {
return (
<div className="child">
<p>{props.children}</p>
</div>
);
};
// 상위 컴포넌트
function Tweets(){
const userLee = "이OO"
const userPark = "박OO"
return (
<ul className="container">
<Tweet> {userLee}{"안녕하세요"} </Tweet>
<Tweet>{userPark}{"hello"}</Tweet>
{/* 열고 닫는 컴포넌트 안에 전달할 내용 기입 */}
</ul>
);
}
// 하위 컴포넌트 : 전달인자로 객체 사용
function Tweet(props){
return (
<li>
<p>{props.children}</p>
</li>
);
}
컴포넌트 속에서 이벤트에 의해 변화하는 값
-> state가 변경되면 자동으로 리렌더링
State hook으로 react에서 state를 다루는 방법 중 하나로 사용되는 특별한 함수
cf. React 16.8 버전부터 Hook이 추가되어 함수형 컴포넌트에서도 state를 변경 가능
const [ state , setState ] = useState(defalt);
호출
import { useState } from "react";
state 변수 선언
: 컴포넌트 내부에서 useState 호출 -> 함수 종료되어도 변수 사라지지 않음
/* isChecked가 state며 기본값은 false로 설정 */
// case 1
const [isChecked, setIsChecked] = useState(false);
// case 2
const stateHookArray = useState(false);
const isChecked = stateHookArray[0];
const setIsChecked = stateHookArray[1];
state 변경
: 2에서 선언한 'state 변경함수'를 호출하여 state값 갱신
-> 'state 변경함수'의 전달인자는 변경될 state값을 의미
import React, { useState } from "react";
function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false);
/*--- 이벤트에 의해 state 변경----*/
const handleChecked = (event) => {
setIsChecked(event.target.checked);
};
return (
<div className="App">
<input type="checkbox" checked={isChecked} onChange={handleChecked} />
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
</div>
);
}
변경된 state 변수 사용
: { }
속에 넣어서 JSX 내부에 변경사항 반영되도록 코드 수정
ex. <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
React에서는 state를 State hook을 통해서 변경할 수 있도록 정의되어있기 때문에 임의로 변경하는 코드를 작성하면 리렌더링 되지 않거나 state가 변경되지 않음
const forcefullyhandleChecked = (event) => {
isChecked = true;
// 강제 변경으로는 리렌더링 되지 않음
// state.push(1);
// state[1] = 2;
// state = 'wrong state';
};
camelCase 적용
cf. DOM의 이벤트 처리는 소문자
JSX 속에서 { }
로 Event handler 전달
/*---- React ----*/
<button onClick={handleEvent}>event</button>
/*---- DOM ----*/
<button onclick="handleEvent()">event</button>
<input>
, <textarea>
, <select>
와 같은 Form 요소의 사용자 입력값이 변경되면 발생하는 이벤트
-> Event 객체에 event.target.value
방식으로 입력값을 추출할 수 있음
<button>
, <a>
와 같은 클릭 가능한 요소에 발생하는 이벤트
function NameForm() {
const [name, setName] = useState("");
/*---- onChange에 적용된 이벤트 핸들러 ----*/
const handleChange = (e) => {
setName(e.target.value);
}
/*
// 이벤트 핸들러 함수 선언한 경우 -> {handleClick} 로 전달
const handleClick = ()=>{
alert(name);
}
*/
return (
<div>
<input type="text" value={name} onChange={handleChange}></input>
{/*---- onClick에 적용된 이벤트 핸들러 ----*/}
{/*<button onClick={handleClick}>Button</button>*/}
<button onClick={() => alert(name)}>Button</button>
<h1>{name}</h1>
</div>
);
};
Quiz
import React, { useState } from "react";
function App() {
const [showPopup, setShowPopup] = useState(false);
const togglePopup = (event) => {
// Pop up 의 open/close 상태에 따라
// 현재 state 가 업데이트 되도록 함수를 완성하세요.
setShowPopup((event.target.className ==="open")? true: false)
};
return (
<div className="App">
<h1>Fix me to open Pop Up</h1>
{/* 버튼을 클릭했을 때 Pop up 의 open/close 가 작동하도록
button tag를 완성하세요. */}
<button className="open" onClick={togglePopup}>Open me</button>
{showPopup ? (
<div className="popup">
<div className="popup_inner">
<h2>Success!</h2>
<button className="close" onClick={togglePopup}>
Close me
</button>
</div>
</div>
) : null}
</div>
);
}
export default App;
React가 state를 통제할 수 있는 컴포넌트
: input값이 바뀔때(onChange)마다 state가 변경되고, input의 value가 변경된 state와 같음
-> 변한 값과 대상의 값이 같아지게 설정
import React, { useState } from "react";
export default function App() {
const [username, setUsername] = useState("");
const [msg, setMsg] = useState("");
return (
<div className="App">
<div>{username}</div>
<input
type="text"
value={username} {/*<----- 변경된 값과 동기화*/}
onChange={(event) => setUsername(event.target.value)}
placeholder="여기는 인풋입니다."
className="tweetForm__input--username"
></input>
<div>{msg}</div>
{/* TODO : 위 input과 같이 입력에 따라서 msg state가 변할 수 있게
아래 textarea를 변경하세요. */}
<textarea
placeholder="여기는 텍스트 영역입니다."
className="tweetForm__input--message"
onChange={(event) => {setMsg(event.target.value)}}
value={msg} {/*<----- 변경된 값과 동기화*/}
></textarea>
</div>
);
}
느낀점
오늘 오전에 카페 가느라 페어때문에 조용한 곳으로 이동하느라 정신없어서 개념학습의 튜토리얼을 다 못한상태로 과제를 진행했는데, 리엑트 더 복습해야겠다. 주말에 블로그 정리 다 해서 그래도 사용할 줄알았는데 이번문제에 map()위치가 또 난항이었다... 아질 갈길이 멀구나. 제공한 틀에서 테스트 통과하려면 부분적으로 수정해야하는데 이게 어느정도까지 수정을 해야하는지 감이 안와서 조금 더 헷갈리는 것 같다. 그런데 이게 내가 확실하게 알고있으면 이런게 덜할테지. 더 집중해야지. 그리고 DOM이벤트...!!! 이번 주말은 이거다. 강의 찾아보고, 정리못한 내용 다시 작업해서 확실히 알고 넘어가자.
개선점 및 리마인드
수면시간 확보
요즘 다시 수면시간이 어그러졌다. 못해서 더 잡고있어봤자 정신이 몽롱하면 도루묵이다. 마라톤 생각하자!!
**