리액트 복습
리액트는 데이터 바인딩이 쉽다?
es6 destructoring
const [a, b] = [1, 2] 이면
const a = 1
const b = 2 가 된다.state
1. 변수 대신 쓰는 데이터 저장공간
2. useState()를 이용하여 만들어야 한다.
3. 문자, 숫자, 배열(Array), object 다 저장가능
4. 자주 바뀌는, 중요한 데이터를 state로 저장해서 사용
state를 쓰는 이유?
1. 웹이 App처럼 동작하게 만들기 위해
2. state가 변경되면 새로고침 없이도 HTML이 자동으로 재렌더링이 됨
state를 변경하려면?
object state, Array 데이터 수정방법
1. 변경함수 사용, 변경함수(대체할 데이터)
const [value, setValue] = useState();에서
두번째 인자인 setValue가 state 변경함수이다. 여기선 이 함수를 통해 value 값을 변경할 수 있다.
예제) []의 첫번째 요소 바꾸기
const [value, setValue] = useState([]);
function 함수이름(){
let new_value = [...value]; >> 딥카피
new_value[0] = '변경할 값이름'
setValue(new_value);
}Component
리액트를 쓰는 큰 이유 중 하나!
컴포넌트 만드는 법
- 함수를 만들어 이름을 짓는다.
- return문 안에 축약을 원하는 HTML을 넣는다.
- 원하는 위치에서 <1에서 만든 함수명 />
- 이름의 첫 글자는 대문자로 한다.
- return문 안에 있는 태그는 하나로 묶어야 한다.
- function App() 도 일종의 컴포넌트.
어떤 것을 컴포넌트로 만들면 좋을까?
- 반복적으로 나오는 HTML 덩어리들
- 자주 바뀌는 HTML UI들
- 다른 페이지를 만들 때
삼항연산자
{ } 중괄호 안에 if문은 작동하지 않는다.
대신, 삼항연산자를 사용한다.
{
1 < 3
? console.log('참')
: console.log('거짓')
}위와 같이
조건식 ? 참일 경우 코드 : 거짓일 경우 코드
로 구성된다.
Modal창 on, off
모달창 on,off도 state 데이터를 이용한다.
let [modal, modal변경] = useState(false);
<button onClick={ () => {modal변경(!modal)} }>스위치</button>
{ modal === true ? <Modal /> : null } // 삼항연산자 사용난 무얼 놓쳤는가?
modal변경()의 인자에 !를 쓰는 것 자체를 생각을 못했다.
로직을 보면 첫 페이지 로드시엔 modal이 false 상태라 null 값을 가진다.
스위치 버튼을 클릭하면 modal변경 함수에 의해 modal이 !false가 되므로 true로 바뀐다.
반복문
{ } 중괄호 안에는 for와 같은 반복문을 사용할 수 없다.
그래서 중괄호 안에서 사용이 가능한 map을 쓴다. 이는 반복문이라고 하기 보단
배열에 붙일 수 있는 일종의 내장함수!
var 어레이 = [2,3,4];
어레이.map(function(a){
return a * 10 (주고싶은 값) // [20, 30, 40] 리턴
});- 소괄호 안에 콜백함수를 넣는게 기본
- map안의 코드가 어레이 요소의 갯수만큼 실행이 된다. (여기선 3번)
- map 함수는 원본을 변형시키지 않는다.
- 파라미터에 들어가는 인수는 아무거나 입력
어떻게 씁니까?
{ 반복할데이터.map(() => { return <HTML> } )}이렇게 써봤습니다
{
a.map((아무거나) => {
return (
<h2>
{ 아무거나 }
</h2>
)
})
}- 인수에 아무거나를 넣어주면서 a에 있던 배열이 차례대로 출력이 되는 것을 확인
props : 부모의 state를 가져다 쓰고 싶어요
props로 자식컴포넌트에 state를 전해주고 싶을 땐 이렇게
1. 데이터를 보내고 싶은 자식컴포넌트로 가서 <자식컴포넌트 작명={전송할 state} />
2. 자식컴포넌트에서 파라미터에 props(이름은 마음대로)를 입력
3. 자식컴포넌트에서 사용하고 싶은 곳에 props.작명[0] 이런 식으로 사용
이렇게 써봤습니다
let[글제목, 글제목변경] = useState(['제목 정하는 중', '뭐로 하지', '이걸로 할까']);
<button onClick={ () => {modal변경(!modal)} }>스위치</button>
// 1. 데이터를 Modal로 보냅니다. 작명센스부족에 글제목 state를 담습니다.
{ modal === true ? <Modal 작명센스부족={글제목} /> : null }
.
.
.
// 2. props를 인자로 받아오고
function Modal(props) {
console.log(props.작명센스부족)
return (
<div className="modal">
// 3. props.작명센스부족 은 3개의 배열을 가져옵니다. ( 위의 글제목 3개 )
<h2>{props.작명센스부족[0]}</h2>
// 첫번째 요소인 '제목 정하는 중'이 출력되겠네요~~~!
<p>날짜</p>
<p>상세내용</p>
</div>
)
}글을 state에 저장하기
답안
div className="publish">
<input type="text" placeholder="Hello World" onChange={ (e) => {입력값변경(e.target.value)} }/>
<button onClick={()=>{
let new_글제목 = [...글제목];
new_글제목.unshift(입력값);
글제목변경(new_글제목)
}}>저장</button>
</div>내가 쓴 답
<div className="publish">
<input type="text" placeholder="Hello World" onChange={ (e) => {입력값변경(e.target.value)} }/>
<button onClick={()=>{
let add_글제목 = [...글제목];
add_글제목 = [...글제목, {입력값}];
글제목변경(add_글제목);
}}>저장</button>
</div>뭘 잘못했나
1. 변수는 중괄호를 써야한다는 사실 때문에 배열안에서 {입력값}을 쓰고 있었다. (여기서 입력값은 input 값)
2. Objects are not valid as a React child 라고 분명히 콘솔에 찍혀있는데 또 영어가 무섭다고 검색을 안했다.
이는 객체는 React 자식으로 유효하지 않다는 말이다.
3. 중괄호 빼주니 정상적으로 작동한다. 😂
4. 순서를 바꿔 add=글제목 = [입력값, ...글제목]으로 해도 unshift(입력값)과 같게 작용한다.
오늘의 TMI
- 졸리면 자는게 낫겠다.. 지각을 결석 수준으로 해버렸다.
- CSS도 중요하지만 JS, 리액트가 더 중요하다! 본질에 집중하자
- 코드리뷰 제대로 하기, 도움이 아주~ 아주~ 많이 된다
- 하나 둘 나가기 시작했다.. 안나가려면 개처럼 해야된다 개처럼.. 하면 된다가 아니라 갈면 된다!
