공부하는 비오

리액트에서 위와 같이 스타일태그를 내부에서 사용하는 경우, 객체를 반환하면 최적화에 도움이 되지 않는다. 리액트는 리렌더링할때, 현재버츄얼돔과 이전 버츄얼돔을 비교해 변화가 있는 부분만 새로 그려주는데, 객체는 동일하다고 인식하지 못하기 때문에 저 부분을 새로그려주게 된다. (콘솔창에 { } === { } 를 작성해보면 false를 반환한다.) 이를 해결하기 위한 방법으로는 외부 스타일 시트를 연결해도 되고, styled-components를 사용하거나 useMemo를 사용할 수 있다. styled-components 위와 같은 경우 div를 원하는 이름으로 바꾸고, 다음과 같이 선언해주면 된다. (클래스 네임 설정한다고 생각하면 편하다. 하지만 어쨌든 변수로 선언하는 것이기 때문에 다른 변수나 함수랑 ..

React/React 관련 라이브러리 2020. 12. 10. 00:02

노드버드 강의를 정리하며 공부하는 글 커스텀훅 (useInput) 회원가입 페이지는 input을 매우매우매우 많이 만들어야 한다. 이렇게 반복되는 것이 많을 때는 커스텀훅을 사용해 중복을 줄여줄 수 있다. hooks 디렉토리를 만들고, useInput.js 파일을 만들어준다. 반복적으로 사용되는 패턴이었던 useState와 setValue를 react hook으로 묶어줬다. return은 value와 setValue를 지정하는 함수를 담은 배열로. 배열에 넣어 이런식으로 사용할 수 있다. 😃😃😃 비밀번호 체크 항목 만들기 비밀번호를 한번 더 입력해서 체크해주는 항목을 만들어보자. 이 항목은 password와 일치하지 않다면 오류를 띄워줄 문장이 추가되기 때문에 아쉽게도 useInput을 사용할 수는 없다..

React 2020. 12. 9. 23:44

모든 컴포넌트에서 props.children을 사용할 수 있다. children은 컴포넌트의 여는태그와 닫는 태그 사이의 내용이다. 예를 들어 아래와 같이 코드를 짤 경우, Profile 컴포넌트에서 사이에 있는 내용인 내 프로필를 AppLayout의 children으로 사용할 수 있다. children은 태그뿐만아니라 문자열도 사용가능하다. Profile 컴포넌트에서 위와같은 화면을 볼 수 있다. AppLayout의 내용이 함께 표시된다. 위와같이 children을 사용하면 layout을 공통으로 사용할 수 있다.

React 2020. 12. 8. 15:19

새로고침 시 첫 화면으로 라우팅하는 방법은 두가지가 있다. 1. Redirect 2. useHistory Redirect Redirect의 경우, 새로고침시 *(모든페이지)에서 '/'로 라우팅해준다. 2. useHistory router에서 제공하는 HOOK이다. useHistory().push('/') 이렇게 사용할 경우, '/'로 주소를 이동해준다.

React 2020. 11. 24. 16:27

h1요소를 클릭시, 콘솔에 say hello 뜨게 만들기. componentDidMount 역할 (렌더링된 직후 호출) component가 mount 되었을 때, onClick 이벤트 추가. componentDidUpdate 역할 (props나 state가 변했을때 새롭게 갱신되면서 렌더링 후 호출) useEffect(effect, deps); 두번째 요소가 [] 빈칸, 즉 없으므로 변화가 일어나도 다시 실행되지 않음. componentWillUnmount 역할 (컴포넌트가 DOM 상에서 제거될때 호출) return 을 사용. useEffect는 onClick 이베트 제거를 반환함. 이렇게 사용하면 useEffect로 정리할 수 있음.

React 2020. 11. 22. 20:54

useRef를 이용하면, document.querySelector처럼 html의 요소를 선택할 수 있다. react의 모든 요소에는 ref라는 속성이 있음. const ul_select = useRef( ) ; 이렇게 코드를 짜면 ul_select.current 라는 변수는 ul요소를 가리킨다. 5초뒤에 input창을 포커스하는 코드.

React 2020. 11. 22. 20:17

useEffect는 componentDidMount, componentWillUnmount, componentWillUpdate와 같은 역할을 한다. useEffect(function, [리스트...]); 두번째 인자는 생략 가능. 두번째 인자가 없을 경우, 모든 변화에 function 실행. 두번째 인자가 있을 경우, 두번째인자가 변경될때에만 useEffect 실행. >>> componentWillUpdate 5초가 지난 뒤에 title이 'Loading...'에서 'Home'으로 바뀜. const titleUpdater = useTitle('Loading...'); 은 componentDidMount, setTimeout(() => titleUpdater('home'), 2000); 은 compone..

React 2020. 11. 22. 17:10

**커스텀훅은 useInput과 같이 'use' 로 시작하는 단어로 함수를 만들어 사용할 수 있다. useInput을 쓰지 않았을 때와 작동하는 기본원리는 같음. 하지만 useInput 함수 안에서 한번에 state와 onChange 메서드를 관리 할 수 있다. 그리고 함수로 만들었기 때문에 재사용성이 높다. 커스텀 훅은 HOOK의 원리를 이용해서 리팩토링하는거라고 생각해도 될듯. vanilla javascript 코드 짤때에도 함수의 중복성을 줄일 수 있으면, 함수로 묶고 매개변수를 주듯이, 커스텀훅도 같은 원리. 유효성체크까지 더한 경우. 10글자까지만 입력되도록 설정(maxLen).

React 2020. 11. 16. 19:59