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

 

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+명사+동사