오늘 한 일
- [내배캠] React 입문 1주차
- Props Children, State
- [수준별학습] 1회차 실시간 강의
- JS 배열 및 객체 타입 메서드
- JS 배열 및 객체 타입 메서드
학습 내용
Props Children
1. Children이란?
자식 컴포넌트로 정보를 전달하는 props와는 다른 방법
<자식컴포넌트></자식컴포넌트>: 부모 컴포넌트에서 자식 컴포넌트로 보내기props.children: 자식 컴포넌트에서 props를 받는 방식
import React from "react";
function User(props) {
console.log(props.children) // props로 정보를 받는 방식
return <div></div>;
}
function App() {
return <User>안녕하세요</User>; // children props를 보내는 방식
}
export default App;2. children의 용도
- Layout 컴포넌트를 만들 때 자주 사용
- Layout 컴포넌트에서 한 번만 작성하면 여러 페이지에서 모두 보여지게 할 수 있다.
- Layout 컴포넌트(자식 컴포넌트)
// src/Layout.js
import React from "react";
function Layout(props) {
return (
<>
<header
style={{
margin: "10px",
border: "1px solid red",
}}
>
항상 출력되는 헤더 부분
</header>
{props.children} // props로 정보를 받는 부분
</>
);
}
export default Layout;- App 컴포넌트(부모 컴포넌트)
// src/App.js
import React from "react";
import Layout from "Layout"; // Layout import
function App() {
return (
<Layout>
<div>여긴 App의 컨텐츠가 들어갑니다.</div> // children props를 보내는 부분
</Layout>
);
}
export default App;Props 추출
1. 구조분해 할당과 props
여러 개의 props를 받는다면, {} 안에 여러 개의 props를 넣어줄 수 있다.
// src/App.js
import React from "react";
import Child from "Child";
function App() {
const name = "test";
return (
<Child age={21} name={name}>
이름
</Child>
);
}
export default App;// src/Child.js
import React from "react";
function Child({ age, name, children }) {
console.log(age); // 21
console.log(name); // test
console.log(children); // 이름
return <div>Child</div>;
}
export default Child;2. defaultProps
- 부모 컴포넌트에서 props를 보내주지 않아도 초기값을 설정할 수 있음
- 부모 컴포넌트에서 props를 받기 전까지 임시로 사용 → props가 오면 내려받은 props로 바뀜
// src/Child.js
Child.defaultProps={
name: '기본 이름'
}3. Default Argument
매개변수가 지정되지 않았다면 자동으로 지정해 줄 값을 정하라는 의미
function multiply(a, b = 1) { // b 값이 지정되지 않았다면 1로 지정
return a * b;
}
console.log(multiply(5, 2)); // 10
console.log(multiply(5)); // 5컴포넌트 파일은
.jsx확장자로 사용하여 보는 사람이 알아볼 수 있도록!
State
1. State란?
Todo LIst처럼 컴포넌트 내부에서 값이 바뀌어야 하는 정보라면 State로 생성
- 목적: UI를 변경하기 위해
2. State 만들기
useState() : State를 만들어 주는 리액트 제공 기능을 사용하여 생성. “훅” 이라고 함
- useState 훅을 사용하는 방식
const [ value, setValue ] = useState( 초기값 ) - 배열의 첫 번째 자리: state 이름
- 배열의 두 번째 자리: set+state 이름
- useState의 인자: 초기값
3. State 변경하기
setValue(바꾸고 싶은 값)
onClick버튼을 눌렀을 때 변경하기
// src/App.js
import React, { useState } from "react";
function App() {
const [name, setName] = useState("홍길동");
return (
<div>
{name} // name의 초기값은 "홍길동" 출력
<br />
<button
onClick={function () {
setName("박길동"); // 버튼을 클릭했을 때 바꾸고 싶은 값 setName으로 변경
}}
>
클릭
</button>
</div>
);
}
export default App;onChangeinput으로 변경하기: input 태그는value와onChange값을 가짐
// src/App.js
import React, { useState } from "react";
function App() {
const [fruit, setFruit] = useState("");
return (
<div>
과일 :{" "}
<input
value={fruit}
onChange={function (event) {
setFruit(event.target.value); // input에 입력한 값이
}}
></input>
<br />
{fruit} // 여기 그대로 출력
</div>
);
}
export default App;
onChange를 이용하여 event 발생 시
event.target.value를 통해 target의 value를 받는다.
오늘의 회고
-
오늘 수준별 학습을 통해 React 환경에서 JS 문법의 활용에 대해 배웠다. 베이직 반과 스탠다드 반 중에 고민했었는데, 일단 스탠다드반의 수업 내용이 더 보충하고 싶은 부분이라 내 수준과는 별개로 스탠다드 반을 선택했다. React 강의를 어느 정도 듣고 들어서 이해는 됐는데, 속도가 빨라서 따라가는데 숨이 가빴다. 헥헥...일단 JS에서 헷갈렸던 배열 메서드를 다시 한 번 정리할 수 있어서 좋았다. 아직까지 헷갈리는 부분들은 많다. 배열 메서드를 사용할 때 기존 배열을 수정, 변경, 추가하는 경우와 새로운 배열을 만들어 내는 경우 접근 방식이 아직은 헷갈려서 과제를 하면서 이것저것 시행착오를 겪었다. 그래도 일단 과제는 다 해서 제출했다. 오늘 배운 배열 메서드는 다시 한 번 벨로그에 정리해야겠다.
-
아직까지 강의를 듣는데 너무 오래 걸린다. 1회독은 가볍게 하자고 다짐하지만, 이해가 안되면 잘 넘어가 지지가 않는다. 일단 내일까지는 1주차 강의와 자바스크립트 문법 강의 못들은 부분을 꼭 완강해야지...
내일 할 일
- [내배캠] React 입문 1주차 완강
- [내배캠] Javascript 문법 5주차 완강
