TIL-22.10.29

제어 컴포넌트

 - <input>의 value값을 리액트에서 지정

  ex) <input value={값} />

 - 리액트에서 사용하는 값과, 실제 인풋 값이 일치

 

 

 

 

htmlFor

 - <lable />에서 사용하는 속성 for는 JS의 반복문 키워드 for와 겹치므로, 리택트에서 htmlFor 라는 키워드로 사용

 

 

 

 

<input> onChange, value, 이벤트함수 등록

 - 이벤트에 등록하는 함수에는 이벤트객체 e를 파라미터로 받아와서 사용가능

 - e.target은 이벤트가 발생한 요소를 가리킴

 - e.target.value를 조회하면 현재 <input>에 입력된 값을 알수 있음( 즉, 사용자가 인풋한 값을 알수있음)

ex) const handleTitleChange = (e) => {

          setTitle(e.target.value);  };   //이벤트 등록 함수

 

     const [title, setTitle] = useState('');

     <input value={title} onChange={handleTitleChange} />    //제어컴포넌트

 

--> e.target = 입력이벤트(e)가 발생한 <input>를 가리킴

       e.target.value = <input>의 입력값을 가리킴

 

 

 

 

HTML <form> 기본동작

submit 버튼 눌렀을때 입력 값과 함께 서버에 GET request 보내는 것

그래서 <form>의 기본 동작을 막고 작업을 수행하려면

핸들러 함수 내 e.preventDefault() 를 통해 해당 태그의 기본동작을 막고 작업 수행

 

 

 

 

사이드이펙트

 - 함수가 실행되면서 함수 외부에 존재하는 값이나, 외부의 상태를 변경시키는 행위

 - 리액트에서는 사이드이펙트 처리 위해 useEffect() 함수 사용

  --> 함수가 매개변수를 받아 결과를 생성하는 것과 무관한, 외부상태 변경, 외부와 상호작용 코드는        

       useEffect()를 통해 분리해놓으면 좋음

ex) function userProfile({ name }) {

        const message = `${name}님 환영합니다`;

 

        document.title = `${name}의 개인정보`;  //사이드이펙트

        return <div>{message}</div>  }

 

-->사이드이펙트 처리위한 useEffect()활용

      useEffect( () => {

        document.title = `${name}의 개인정보`;

      }, [name]);