22.07.31 일요일
🚀WIL
State란?
- 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용한다.
- 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있다.
- 보통 이벤트와 함께 사용한다.
- 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용한다.
- props는 부모 컴포넌트가 자식 컴포넌트에서 주는 값이다. 자식 컴포넌트에서 props를 받아오기만 하고, 받은 props를 직접 수정 할 수는 없다.
함수형 컴포넌트의 state-useState의 사용방법
클래스형 컴포넌트에서 state={}값을 정하고, this.setState 함수로 state의 값을 변경하는 방식이 있는데 함수형 컴포넌트에서는 useState 함수가 이 두개의 역할을 같이 할 수 있게 해준다.
import React, {useState} from 'react';
const Say = () => {
const [message, setMessage] = useState('초기값');
//배열 비구조화 할당 문법으로 이해하면, useState 함수를 호출할 시 배열이 반환돤다.
// message는 초기값을 담고있는 state변수, setMessage는 state 값을 업데이트 해주는 함수가 된다.
const onClickEnter = () => setMessage('안녕!');
const onClickLeave = () => setMessage('잘가!');
// 버튼을 누를 때마다 message에 있는 값이 안녕! 혹은 잘가!로 바뀔 수 있도로
// 화살표 함수 문법과 setMessage함수를 사용
//아래 return 문에서 버튼 각각에 onClick함수를 지정해준다
const [color, setColor] = useState('black');
// useState함수는 하나의 컴포넌트 안에서 여러번 사용해도 상관 없다.
// msessage라는 상태 외에 다한 상태를 더 추가하여 관리할 수 있다.
return (
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1>{message}</h1>
<button style= onClick={()=>setColor('red')}>RED</button>
</div>
);
};
export default Say;배열 비구조화 할당
props의 값들을 쉽게 가져오기 위해 const{name, children} = props와 같이 코딩하는것이다.
Props란?
- Properties의 줄임말이다.
- 상위 컴포넌트가 하위 컨포넌트에 값을 전달할때 사용한다 (단방향 데이터 흐름을 갖는다)
- 수정할 수 없다(자식입장에선 읽기 전용인 데이터이다)
사용방법
문자열을 전달할 때는 큰따옴표(""), 문자열 외의 값을 전달할 떄는 중괄호({})를 사용한다
App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name,color 이라는 값을 전달해주고 싶을때
App.js
import React from 'react';
import Hello from './Hello';
// hellow 컴포넌트를 import문을 써서 불러온다
function App() {
return (
<Hello name="react" color="red"/>
);
}
export default App;import React from 'react';
function Hello(props) {
return <div>안녕하세요 {props.name}</div>
}
//컴포넌트에서 전달되는 Props는 파라미터를 통해 조회할 수 있다.
//props는 객체 형태로 전달되면 만약 name 값을 조회하고 싶다면 props.name을 조회하면 된다
export default Hello;
Hello.js
import React from 'react';
function Hello({ color, name }) {
return <div >안녕하세요 {name}</div>
//함수의 파라미터에서 비구조 할당 문법을 예제와 같이 사용하면 조금 더 코드를 간결하게 작성 할 수 있다.
}
export default Hello;props와 state의 차이
props와 state 모두 컴포넌트에서 사용 혹은 렌더링할 데이터를 담고 있다.
props는 부모 컴포넌트 쪽에서 설정해 주는 것이다. 컴포넌트 자신이 변경할 수 없다.
반면 state는 컴포넌트 자신이 직접 가지고 있는 값이고, 그 값의 변경도 내부에서 가능하다.
props를 사용했는데도 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있다.
리렌더링 발생 조건
랜더링은 컴포넌트의 정보를 이용해 화면을 보여주는 것이다
만약 랜더링이 많아지면 속도가 저하되고 메모리 사용량이 높아진다. 같은 결과 화면이라도 최소한의 렌더링으로 보여줄 수 있어야한다.
리렌더링 조건
-
props 변경
props 업데이트가 일어나면 리렌더링이 된다. props가 변경되는 건 부모 컴포넌트의 state도 변경된다는 의미이다. 그렇게되면 모든 하위 컴포넌트에 대한 리렌더링이 일어난다. -
State 변경
리액트에서는 state값이 변경되면 관련 컴포넌트들을 전부 리렌더링 한다. -
부모 컴포넌트 렌더링
props와 같은 원리이다
💬 3주차 후기
주특기 입문 주차는 소문보다 더 힘들었다. 코딩은 타고난 재능빨이랬는데 이게 그거인가 다시 전직종으로 들어가야하나 나는 바보멍청이인가 왜 이해를 못하지 자괴감에 빠진 한 주였다 첫 이틀까지는 하면되지!이랬는데 막판으로 갈수록 너무 힘들었다.
왜 그랬나 생각해보면 일단 100% 이해하면 빈 화면에 내가 코드를 술술 쓸 수 있겠지? 그렇게 하고싶었다. 하지만 제공된 강의는 50%도 이해 못하겠고 시간은 지나나가고 과제는 시작해야하는데 조급해졌다 그래서 유투브, 사설 강의를 찾아봤더니 도움이 되었다. 그리고 무엇보다 총괄매니저님의 어드바이스가 도움이 되었다.코드를 짜집기도 문제없다 다만 그 코드를 왜 써야하는지 이유를 찾으면서 해야한다고 어드바이스를 주셨다 그 이후로 다른 팀원들이 짠 코드를 보면서 해석하며 구글링하고 이해가 안되면 팀원들한테 물었다. 지금도 솔직히 100%는 아니지만 이해되었고 할 수 있을거같다는 자신감이 생겼다
도움을 주신 팀원들이 있어서 끝낼 수 있었지만 같이 힘들어했던 팀원들이 있어서 서로 으쌰으쌰하면서 주차를 끝낼 수 있었다. 게더는 생각보다 따뜻했다 정말 같이 공부하는 느낌도 나고
다음 주도 그냥 하자
화이팅
