elice/토끼성장일지

[엘리스 AI트랙] 03-04-01 ~03-04-02 React 기초 2

Juliie 2021. 10. 11. 17:19

 

TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

 

1. Props

  • 컴포넌트에 원하는 값을 넘겨줄 때 사용
  • Javascript의 요소라면 모두 넘겨줄 수 있음(ex: 변수, 함수, 객체, 배열 등)
  • 주로 컴포넌트의 재사용을 위해 사용
  • 컴포넌트에 많은 로직이 들어가고 반환되는 jsx의 요소들이 많고 복잡하다면 props를 사용하는게 효율적
  • props는 읽기 전용⭐️

 

  • 왼쪽처럼 props의 값을 직접 변경할 경우 리액트가 재렌더링하는데 문제가 생길 수 있음
  • 오른쪽처럼 새 변수를 생성해 복제해서 사용합쉬다

 

 

  • HTML에서의 checked, value ➡️ 초기값
  • 리액트에서는 현재값
  • 초기값을 지정하고 싶다면 defaultChecked, defaultValue 속성 사용하기

 

2. State

  • 컴포넌트 내에서 유동적으로 변할 수 있는 값을 저장
  • state 값이 변경되고 재렌더링이 필요한 경우 리액트가 자동으로 계산하여 변경된 부분을 렌더링

  • 그렇기 때문에 이런식으로 state 값을 직접 변경하게 되는건 리액트는 못 참는다,,,(오류는 안남)
  • ➡️ 리액트가 다시 렌더링할 타이밍을 적절하게 잡을 수 있도록 setState 함수를 사용하자(재렌더링 명령)

state를 변경하는 두 가지 방법

(1) setState 함수에 변경할 값 직접 넣기

  • 넣은 값으로 state 값 변경

(2) setState에 함수 넣기⭐️

  • 함수가 리턴하는 값으로 state 변경(현재값 기반으로 state 변경하는 경우 권장)

object를 갖는 state를 만들 때 주의 사항⭐️

  • 기존 객체의 내용을 새로운 object에 담고 해당 내용을 변경한다 (헷갈리면 물류창고 비유)
  • 전자의 경우 인식 및 재렌더링 불가

 

3. 이벤트

  • 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생
  • evenet object의 target은 이벤트의 원인이 되는 element를 가리킴(ex: e.target.value)
  • object의 key를 동적으로 할당하는 방법
    const App = () => {
    	const [user, setUser] = useState({ name: "민수", school: "피자스쿨"});
    	
        const handleChange = (e) => {
        	const { name, value } = e.target;
            const newUser = { ...user };
            newUser[name] = value;
            setUser(newUser);
        };
        
        return (
        	<div>
            	<input name="name" onChange={handleChange} value={user.name} />
                <br />
                <input name="school" onChange={handleChange} value={user.school} />
                <p> {user.name} 님은 {user.school}에 재학중입니다. </p>
            </div>
        );
    };​
  • 이벤트 작명: on+동사 / on+명사+동사
  • 핸들링 함수 작명: handle+동사 / handle+명사+동사