[ReactJS] React 이론 공부 기초 - 2

 

Props 란?

• 컴포넌트로 전달되는 매개변수
• 기본적으로 컴포넌트에 원하는 값을 넘겨줄 때 사용함
  • 넘겨줄 수 있는 값은 변수,함수,객체, 배열 등 javascript 요소라면 제한이 없음
• 주로 컴포넌트의 재사용을 위해 사용함
• props 는 읽기 전용으로, 값을 변경해서 사용하고 싶다면 새로운 변수를 생성해 변경해야 함
• 부모 컴포넌트에서 자식 컴포넌트로 전달하는 값으로 자식 컴포넌트에서는 Props를 직접 수정할 없음

 

DOM element의 attribute

• 기본 DOM element들의 attribute는 camelCase 로 작성함
  • data 또는 aira 로 시작하는 attribute는 예외
• html 의 attirbute 와 다른 이름을 가지는 attribute가 있음
  • ex) class(=>className), for(=>htmlFor),  value(defaultValue), style 등
  • checked (defaultChecked) 
    • html 에서는 초기값으로 쓰이지만 리액트에서는 현재값을 의미
  • 만약 초기값의 의미로 checked, value를 사용하고 싶다면 defaultChecked, defaultValue attribute를 사용해야 함
• React만 쓰이는 새로운 attribute가 있음
  • ex) key
    
    • 리액트가 어떤 항목을 변경, 추가, 또는 삭제할지 식별하는 것을 도움
    • 엘리먼트에 안정적인 고유성을 부여하기위해 배열 내부의 엘리먼트에 지정해야 함
    • 배열 안에서 형제 사이에 고유해야하고 전체 범위에서 고유할 필요는 없음
    • 두개의 다른 배열을 만들때 동일한 키를 사용 할 수 있음

State

• 컴포넌트 내에서 유동적으로 변할 수 있는 값을 저장함
• 컴포넌트 내부에서 관리되는 값으로 변경할 수 있음
• 개발자가 의도한 동작에 의해 변할 수 있고, 사용자의 입력에 따라 새로운 값으로 변경될 수 있음
• state 값이 변경되고 재랜더링(re-rendering)이 필요한 경우, 리액트가 자동으로 계산하여 변경된 부분을 랜더링함
• state 값을 직접 변경하게 되면 리액트가 컴포넌트를 다시 랜더링할 타이밍을 알아차리지 못함
  • setState 함수를 이용해 값을 변경해야 함

## state 예시

const [userName, setUserName] = useState('');

const handlingInput = (e) => {
    setUserName(e.target.value);
}

...
<input type='text' value={userName} onChange={handlingInput}/>

 

이벤트처리

• 이벤트란 웹 브라우저가 알려주는 html 요소에 대한 사건의 발생을 의미함
• 유저의 행동에 의해 발생할 수도 있으며, 개발자가 의도한 로직에 의해 발생할 수도 있음
  • 이렇게 발생된 이벤트를 자바스크립트를 이용해 대응할 수 있음
• 이벤트 핸들링 방법
  • 핸들링 함수 선언
  • 익명함수로 선언
• DOM element의 경우 핸들링 함수에 이벤트 object를 매개변수로 전달함
• event object를 이용하여 이벤트 발생 원인, 이벤트가 일어난 elemnent에 대한 정보를 얻을 수 있음
  • ex) e.target.value
• 많이 쓰이는 DOM 이벤트
  • onClick, onChange,onKeyDown, onKeyUp, onKeyPress, onDoubleClick, onFocus, onBlur, onSubmit
• 컴포넌트간 이벤트 전달하기가 가능함
  • 사용자가 입력한 정보를 현재 컴포넌트가 아닌 부모 컴포넌트에서 활용해야하는 경우, 이벤트를 Prop로 전달할 수 있음

	Props	State
수정가능여부	자식 컴포넌트에서는 Props를 직접 수정할 없음	컴포넌트 내부에서 관리되는 값으로 변경할 수 있음
용도	읽기전용(수정불가)	값이 변하는 것을 출력해야하는 경우 사용

 

 

리액트의 생명주기

• 생명주기는 컴포넌트가 이벤트를 다룰 수 있는 특정 시점을 말하며 마운트, 업데이트, 언마운트 상태로 구성되어 있음
  • 마운트 : 컴포넌트가 실제 DOM에 삽입되는 것을 의미함
  • 업데이트 : 컴포넌트가 변하는 것을 의미함
  • 언마운트 : 컴포넌트가 DOM 상에서 제거되는 것을 의미함
• React의 생명주기 메소드의 종류
  • constructor(): State 데이터를 초기화 하는 메소드
  • render(): 클래스 컴포넌트에서 반드시 구현되어야 하는 메소드
  • componentDidMount(): 컴포넌트가 마운트 된 직후 호출되는 메소드
  • componentDidUpdate(): 업데이트가 진행된 직후에 호출되는 메소드
  • componentWillUnmount(): 컴포넌트가 마운트 해제되어 제거되기 직전에 호출되는 메소드

출처 : 엘리스 SW트랙 강의자료

 

 

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript