- state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.
- React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.
- React 컴포넌트(React Component)에 props를 전달할 수 있다.
- 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다.
- 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다.
- 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다.
- React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다.
- JSX 문법의 기본과 컴포넌트 기반 개발에 대해서 숙지한다.
- React Router DOM으로 React에서 SPA(Single-Page Application)을 구현할 수 있다.
- state hook을 이용하여, 컴포넌트에서 데이터를 변화시킬 수 있다.
- props를 이용하여, 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달할 수 있다.
- 바람직한 컴포넌트 구조와 state와 props의 위치에 대해 고민한다.
🍙 Intro
| State(살면서 변할 수 있는 값 => 상태) 리액트 => 컴포넌트 사용 중 내부에서 변할 수 있는 값 |
Props(외부에서 전달받은 값 => 변하지 않음) |
| 나이, 현재 사는곳, 결혼/연애 유무 | 이름,성별 |
| UI컴포넌트 | 스위치 | 수량버튼 |
| State | on/off 여부에 따라 달라진다 | 현재 숫자 값 +/- 버튼 클릭에 따라 달라진다 |
| code | {isOn : true} {isOn : false} |
{count:0} {count:5} |
🍙 Props의 특징
- 컴포넌트의 속성(property)을 의미한다. 변하지 않는 외부로부터 전달 받은 값이다.
- 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값
- React 컴포넌트는 Javascript 함수와 클래스로, props를 함수의 전달인자(argument)로 전달받아
이를 기반으로 화면에 어떻게 표시되는 지를 기술하는 React 요소(element)를 반환한다.
=> 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다.
- 객체형태이다.
- 읽기 전용이다. 데이터를 전달받아 변하지 않는 값이므로 변경할 수 없다.
=> 읽기전용이 아니라면? Props를 전달받은 하위 컴포넌트 내에서 수정시 상위 컴포넌트의 값이 영향을 끼친다.
=> 이는 단반향, 하향식 데이터 흐름 원칙에 위배된다.
🍙 props 사용 방법
1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링 한다.
🍙 props.children
1.하위 컴포넌트태그 태그 사이에 value를 넣는다.
2. {props.children}을 이용한다.
🍙 state 사용법
1. React로부터 useState를 불러온다.
2. useState를 컴포넌트 안에서 호출해준다.
=> 'state'라는 변수를 선언하는것과 같다. 이름은 아무거나 다 됌.
=> state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.
3. useState를 호출하면 배열을 반환하는데
0번째 요소 : 현재 state 변수
1번째 요소: 이 변수를 갱신할 수 있는 함수
useState(인자로 넘겨주는 값) => state의 초깃값
4. state변수에 저장된 값을 사용하려면 JSX엘리먼트 안에 직접 불러 사용
state 갱신하기
5. state 변수를 갱신할 수 있는 함수 호출
input[type=checkbox] 엘리먼트 값이 변경되면 onchange이벤트가 발생
🍙 state 사용시 주의점
React 컴포넌트는 state가 변경되면 새롭게 호출되고 리렌더링이 된다.
React state는 상태 변경 함수 호출로 변경해야 한다.
강제로 변경을 시도하면 리렌더링이 안되거나 state가 제대로 변경되지 않는다.
🍙과제로 보는 state
과제
트위터의 input값과 textarea 의 value를 화면에 더미데이터(배열)과 함께 구현되고 추가된 트윗은 제일 위에 보여야 한다.
문제 해결 과정
1. React로부터 useState를 불러온다.
2. useState를 컴포넌트 안에서 호출해준다.
유저의 이름을 넣을 값, 트윗내용을 넣을 값 , 화면에 랜더링할 더미데이터값을 변수에 할당해준다.
3.useState를 호출하면 배열을 반환 하는데
| 화면에 랜더링할 더미데이터값 | 유저의 이름을 넣을 값 | 트윗내용을 넣을 값 | |
| 0번째 요소 : 현재 state 변수 | posts | name | msg |
| 1번째 요소: 이 변수를 갱신할 수 있는 함수 | setPosts | setUsername | setMsg |
| useState(인자로 넘겨주는 값) => state의 초깃값 | dummyTweets(원래의 더미 데이터) | ""(빈 문자열) | ""(빈 문자열) |
4. state변수에 저장된 값을 사용하려면 JSX엘리먼트 안에 직접 불러 사용
5. state 변수를 갱신할 수 있는 함수 호출
<button>을 눌렀을때 만들어진 새 트윗을
원래 있던 더미데이터 배열에 추가해줘야한다.
새 트윗 안의 내용은
원래있던 더미데이터의 프로퍼티 양식을 따르고
map함수를 이용하기 때문에
id값을 꼭 주어야
렌더링할때 정상 출력이된다.
버튼이 클릭이 되고,
새 트윗이 만들어지며
변수로 만들어뒀던 데이터의 값이 변하므로
setPosts()가 실행이되고
새트윗은 배열의 첫번째 요소로 들어가게된다.
나머지 요소들은 스프레드문법으로 넣어준다.
'JavaScript' 카테고리의 다른 글
| Rest API (6) | 2023.03.29 |
|---|---|
| HTTP/네트워크 기초 (1) | 2023.03.28 |
| React SPA React Router (4) | 2023.03.23 |
| Asynchronous (0) | 2023.03.19 |
| 프로토타입 체인 (0) | 2023.03.15 |
- state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.
- React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.
- React 컴포넌트(React Component)에 props를 전달할 수 있다.
- 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다.
- 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다.
- 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다.
- React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다.
- JSX 문법의 기본과 컴포넌트 기반 개발에 대해서 숙지한다.
- React Router DOM으로 React에서 SPA(Single-Page Application)을 구현할 수 있다.
- state hook을 이용하여, 컴포넌트에서 데이터를 변화시킬 수 있다.
- props를 이용하여, 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달할 수 있다.
- 바람직한 컴포넌트 구조와 state와 props의 위치에 대해 고민한다.
🍙 Intro
| State(살면서 변할 수 있는 값 => 상태) 리액트 => 컴포넌트 사용 중 내부에서 변할 수 있는 값 |
Props(외부에서 전달받은 값 => 변하지 않음) |
| 나이, 현재 사는곳, 결혼/연애 유무 | 이름,성별 |
| UI컴포넌트 | 스위치 | 수량버튼 |
| State | on/off 여부에 따라 달라진다 | 현재 숫자 값 +/- 버튼 클릭에 따라 달라진다 |
| code | {isOn : true} {isOn : false} |
{count:0} {count:5} |
🍙 Props의 특징
- 컴포넌트의 속성(property)을 의미한다. 변하지 않는 외부로부터 전달 받은 값이다.
- 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값
- React 컴포넌트는 Javascript 함수와 클래스로, props를 함수의 전달인자(argument)로 전달받아
이를 기반으로 화면에 어떻게 표시되는 지를 기술하는 React 요소(element)를 반환한다.
=> 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다.
- 객체형태이다.
- 읽기 전용이다. 데이터를 전달받아 변하지 않는 값이므로 변경할 수 없다.
=> 읽기전용이 아니라면? Props를 전달받은 하위 컴포넌트 내에서 수정시 상위 컴포넌트의 값이 영향을 끼친다.
=> 이는 단반향, 하향식 데이터 흐름 원칙에 위배된다.
🍙 props 사용 방법
1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링 한다.
🍙 props.children
1.하위 컴포넌트태그 태그 사이에 value를 넣는다.
2. {props.children}을 이용한다.
🍙 state 사용법
1. React로부터 useState를 불러온다.
2. useState를 컴포넌트 안에서 호출해준다.
=> 'state'라는 변수를 선언하는것과 같다. 이름은 아무거나 다 됌.
=> state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.
3. useState를 호출하면 배열을 반환하는데
0번째 요소 : 현재 state 변수
1번째 요소: 이 변수를 갱신할 수 있는 함수
useState(인자로 넘겨주는 값) => state의 초깃값
4. state변수에 저장된 값을 사용하려면 JSX엘리먼트 안에 직접 불러 사용
state 갱신하기
5. state 변수를 갱신할 수 있는 함수 호출
input[type=checkbox] 엘리먼트 값이 변경되면 onchange이벤트가 발생
🍙 state 사용시 주의점
React 컴포넌트는 state가 변경되면 새롭게 호출되고 리렌더링이 된다.
React state는 상태 변경 함수 호출로 변경해야 한다.
강제로 변경을 시도하면 리렌더링이 안되거나 state가 제대로 변경되지 않는다.
🍙과제로 보는 state
과제
트위터의 input값과 textarea 의 value를 화면에 더미데이터(배열)과 함께 구현되고 추가된 트윗은 제일 위에 보여야 한다.
문제 해결 과정
1. React로부터 useState를 불러온다.
2. useState를 컴포넌트 안에서 호출해준다.
유저의 이름을 넣을 값, 트윗내용을 넣을 값 , 화면에 랜더링할 더미데이터값을 변수에 할당해준다.
3.useState를 호출하면 배열을 반환 하는데
| 화면에 랜더링할 더미데이터값 | 유저의 이름을 넣을 값 | 트윗내용을 넣을 값 | |
| 0번째 요소 : 현재 state 변수 | posts | name | msg |
| 1번째 요소: 이 변수를 갱신할 수 있는 함수 | setPosts | setUsername | setMsg |
| useState(인자로 넘겨주는 값) => state의 초깃값 | dummyTweets(원래의 더미 데이터) | ""(빈 문자열) | ""(빈 문자열) |
4. state변수에 저장된 값을 사용하려면 JSX엘리먼트 안에 직접 불러 사용
5. state 변수를 갱신할 수 있는 함수 호출
<button>을 눌렀을때 만들어진 새 트윗을
원래 있던 더미데이터 배열에 추가해줘야한다.
새 트윗 안의 내용은
원래있던 더미데이터의 프로퍼티 양식을 따르고
map함수를 이용하기 때문에
id값을 꼭 주어야
렌더링할때 정상 출력이된다.
버튼이 클릭이 되고,
새 트윗이 만들어지며
변수로 만들어뒀던 데이터의 값이 변하므로
setPosts()가 실행이되고
새트윗은 배열의 첫번째 요소로 들어가게된다.
나머지 요소들은 스프레드문법으로 넣어준다.
'JavaScript' 카테고리의 다른 글
| Rest API (6) | 2023.03.29 |
|---|---|
| HTTP/네트워크 기초 (1) | 2023.03.28 |
| React SPA React Router (4) | 2023.03.23 |
| Asynchronous (0) | 2023.03.19 |
| 프로토타입 체인 (0) | 2023.03.15 |
