IT 공부 블로그

1. react-router-dom 라이브러리 설치 2. 컴포넌트로 감싸서 라우터(history, match, location)을 사용 3. a링크 컴포넌트 사용하면 안되고 link 컴포넌트 사용 4. url로 넘어온 param은 match를 이용하여 제어, history를 이용하여 브라우저 페이지 이동이 가능, location에는 현재 주소정보가 들어있음 5. withRouter는 hoc 컴포넌트이며 라우트로 등록된 컴포넌트가 아니여도 history, location, match를 이용할수있도록 해줌 6. Switch 컴포넌트를 이용하여 라우트 컴포넌트들 중 하나만 보여줄수있다 없으면 not found 페이지를 띄워줄수도있음 7. NavLink 컴포넌트를 이용하여 현재 경로와 같은 주소를 같는 메뉴에 ..

컴포넌트다 꽤 중요한 내용? 함수형 컴포넌트, 클래스형 컴포넌트 라이프사이클, state는 원래 클래스형 컴포넌트에서만 사용할수있었는데 이제 함수형 컴포넌트도 hooks를 이용하면 사용할수있다 함수형컴포넌트에서 state 대신 useState를 이용하여 state를 사용할수있으며const { value, setValue } = useState('');첫번쨰 파라미터는 state 객체? useState의 파라미터값에 따라 객체도되며 string값도 된다 지금은 string 값을 넣어줬으니 string 두번쨰 파라미터인 set함수를 이용해서 값을 변경해줘야함

음.. 그냥 이벤트 핸들링 내용이였다onClick 이런거 그냥 대충 알고있는거 prop state에 대한거와 event 사용법? this.setState({[e.target.name] : "Dasdsa"}) 위와 같이 여러개일경우 name으로 구분하여 사용이 가능하다 그외는 별 내용없음 prop과 state를 잘모르겠다면 블로그 내용 한번 뒤져보자 써놨겠지

ref 꼭 필요할때만 사용해야하며 컴포넌트 간 데이터 전달시에는 사용 x this.input=ref}/> 같이 사용 dom id와 비슷한거 같은데 쓸일이 자주 없을꺼같다 컴포넌트에도 ref를 달수있음 this.Test=ref}/> 위와 같은 코드는 클래스형 컴포넌트에서 동작 함수형 컴포넌트에서는 동작하지않음 ref는 필요할때 찾아보자

컴포넌트에서 or 등 하나의 태그만 리턴하게끔 한것은virtualDOM이 비교할때 효율적으로 하기위함 JSX안에서는 if문을 사용할수없지만 간단한 비교연산가능{name == "이름" ? : 11 : 22}or{name == "이름" && 11 }