728x90 밸로퍼트7 10.19.22{코딩일기}벨로퍼트와 함께하는 모던리액트 2-1~2챕터리뷰 [ 새롭게 알게된 것 ] 1. Sass는 코드의 확장성과 가독성 두마리 토끼를 모두 잡은 CSS 전처리기임 'Syntactically Awesome Style Sheets: 문법적으로 짱 멋진 스타일시트'라는 글자의 약어인 Sass. Sass는 두가지 확장자를 지원함. 하나는 .scss 이고 다른 하나는 .sass 임. 서로 문법 차이가 있다 함. 2. Sass 사용법은 node-sass라는 라이브러리 설치해주면 됨 $ yarn add node-sass 3. Sass는 놀랍게도 CSS 함수를 짤 수 있음 lighten()이나 darken()같은 함수 활용가능 $blue: #228be6; 이런식으로 변수 선언도 가능함 4. 필요한 이벤트를 매번 파라미터로 넣어주는게 귀찮으면 spread와 rest 사용하면.. 2022. 10. 19. 10.08.22{코딩일기}벨로퍼트와 함께하는 모던리액트 1-19~20챕터리뷰 [ 새롭게 알게된 것 ] 1. React.memo는 컴포넌트 props가 바뀌지 않았는데도 리렌더링 되는 걸 방지함 사용법 아주 쉬움. export default React.memo(CreateUser); 2. React.memo로 감싸줘도 일부 주변 컴포넌트들이 리렌더링 된다면 상태값배열 deps참조 삭제하셈. 그럼 최신 상태값 참조는 누가하나? 해당 상태값 배열 콜백함수가 해주도록 하면 됨. 예를들면 users state가 존재하는데 하나 바뀔때마다 매번 리렌더링 되는 문제가 있음 이를 해결해주기 위해 setUser라는 콜백함수 파라미터에 아래처럼 참조하게 하면 끝! setUsers(users => users.concat(user)); setUsers(users => users.map(user => .. 2022. 10. 8. 10.07.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-18 챕터리뷰 [ 새롭게 알게된 것 ] 1. useCallback은 특정 함수를 새로만들지 않고 재사용하고 싶을때 사용하는 훅(Hook)! useMemo랑 살짝 비슷할 수 도 있는데, useMemo는 특정값을 재사용하는거라면 useCallback은 함수를 재사용하는 거임. 사실 useCallback은 useMemo를 기반으로 만들어 졌다고 함. const onToggle = useMemo( () => () => { /* ... */ }, [users] ); 2. 함수 재사용이 중요한 이유는 컴포넌트 최적화를 위함임. 만약 props가 바뀌지 않았으면 virtualDOM에 새로 렌더링조차 하지 않아도 컴포넌트 결과물을 재사용할 수 있음. 이런걸 위해서 함수를 재사용하는것이 중요한 이유임. 3. 참조값을 항상 최신으로 유.. 2022. 10. 7. 10.05.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-16 챕터리뷰 [ 새롭게 알게 된 것 ] 1.컴포넌트 등장을 다른말로 마운트라고 함. 드디어 마운트가 무슨뜻인지 알게됨. 언마운트될때는 반대로 컴포넌트 사라질때를 의미함. 2. useEffect는 컴포넌트 등장 상태 따라 특정 작업 가능케함 컴포넌트 안에 아래와 같이 useEffect를 사용할 수 있음 참고로 useEffect는 Hook을 사용함. 참고로, useEffect의 첫번째 파라미터에는 함수이고 두번째 파라미터에는 의존값이 들어있는 (deps) 를 넣을 수 있음 useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); return ( ...생략 3. useEffect 왜 사용하는지.. 2022. 10. 5. 10.03.22{코딩일기} 벨로퍼트와 함께하는 모던 리액트 1-12~13 챕터리뷰 [ 새롭게 알게 된 것 ] 1. useRef의 또 다른 용도는 변수 관리 챕터10에서 DOM을 선택하는 용도외에도, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것임. 하지만 useRef로 관리하는 변수는 값이 바뀌어도 리렌더링에 영향주지 않음. 하지만 값이 바뀐 변수는 바로 조회 및 이용 가능함. 2. useState가 있는데 굳이 useRef를 사용해 컴포넌트 외부에 변수를 선언하는 이유 컴포넌트 내부에 변수를 선언하고 useState로 관리하면, 렌더링 될때마다 값이 초기화 되는 현상이 있기 때문임. 대신 useRef로 관리하면 전역으로 맨 마지막에 업데이트 한 값을 유지해야 할때, 컴포넌트가 렌더링되도 영향 안받음. 따라서 용도에 따라 적절한 Hook 사용의 중요성을 느낌. 3. 왜 .. 2022. 10. 3. 10.03.22{코딩일기} 벨로퍼트와 함께하는 모던 리액트 1-11 챕터리뷰 [ 새롭게 알게 된 것 ] 1. 하나의 파일에 여러개의 컴포넌트 선언가능 컴포넌트끼리 파라미터를 통해 값을 주고 조건에 맞게 수정된 값을 반환 해줄 수 있음. import React from 'react'; # 하나의 파일에 서로다른 컴포넌트를 선언함 function A() {return(..)} function B() {return(..)} export default A export default B 2. 배열에 담긴 값은 컴포넌트 재사용을 고려해야함 하니씩 일일이 배열의 인덱스를 조회하며 렌더링 할 수 있음. 동적으로 배열을 렌더링 하지 못함. 하드코딩으로 박아놓은 인덱스들만 조회 가능함. 만약 배열에 계속 새로운 값이 추가된다면? 또는 배열이 state로 관리된다면 더욱 동적으로 렌더링 해줘야됨. .. 2022. 10. 3. 09.29.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-5~1-9 챕터리뷰 [오늘 새롭게 알게된 것] 1. Props의 단어기원과 용도 및 디폴트값은 true로 할당됨 properties의 줄임말임. 용도는 어떤 값을 컴포넌트에게 전달해주어야 할때 사용됨 이때 전달해주는 값은 객체로 전달됨. 예를 들면 App 컴포넌트에서 Hello컴포넌트로 값을 전달해주고 싶을땐 App컴포넌트안에 를 사용하면 아래와 같이 사용가능함 Props의 내부의 값을 참조할땐 props. 을 이용하면 됨 아무값도 할당안되고 props가 선언만 된경우 true로 초기화 됨 def function Hello(props){ return ( let myName = {props.name} 내이름은 {myName} ) } 2. 비구조화 할당은 props 사용 편의성 증대시킴 function Hello(props) .. 2022. 9. 29. 이전 1 다음 728x90
