본문 바로가기
728x90

전체 글95

10.12.22{코딩일기}벨로퍼트와 함께하는 모던리액트 1-23챕터리뷰 [ 새롭게 알게된 것 ] 1. 리액트에서 객체의 불변성은 지켜주고 아껴줘야됨 이미 다른 챕터에서도 여러번 강조했던 내용이라 알고 있지만 다시금 마음에 새기자. 이렇게 하면 안되고 const object = { a: 1, b: 2 }; object.b = 3; 이렇게 spread연산자 사용해서 지켜주자 불변성 const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 }; 2. 근데 리액트에서 배열도 마찬가지로 불변성 지켜줘야됨을 알게됨 push나 splice등으로 직접 항목을 수정하거나 삭제하면 안됨. concat이나 const inserted = todos.concat({ id: 3, text: '할 일 #3', done: false });.. 2022. 10. 12.
10.10.22{코딩일기}벨로퍼트와 함께하는 모던리액트 1-22챕터리뷰 [ 새롭게 알게 된 것 ] 1. Context API는 컴포넌트를 3개이상 거쳐서 props를 전달할때 활용됨 컴포넌트를 한개정도 거쳐서 전달하는건 크게 불편한게 아님. 3개이상일땐 Context API와 dispatch를 사용해 복잡한 구조를 해결할 수 있음. 2. Context API로 관리할 수 있는 값은 전역'값'이지 '상태'에 국한되지 않음을 알게됨 이 값은 함수일수도 있고, 인스턴스 일 수도 있고, DOM일 수 도 있음 3. Context API를 사용하는 방법 Context를 만들땐 React.createContext()라는 함수를 사용함. createContext의 파라미터에는 Context의 기본값을 설정할 수 있음. 여기서 기본값이란 값을 따로 지정하지 않을 경우 사용되는 기본값. 예를.. 2022. 10. 11.
10.10.22{코딩일기}벨로퍼트와 함께하는 모던리액트 1-21챕터리뷰 [ 새롭게 알게된 것 ] 1. 드디어 커스텀 Hooks을 왜 만드는지 알게됨 이번에 4차 스프린트에 참여하게 되면서 컴포넌트와 컨트롤러를 분리해서 작업하는 법을 알게 되었음. 이 작업의 목적과 커스텀 Hooks를 제작하는 목적 모두 반복되는 로직을 쉽게 재사용하기위함 임을 발견함. 하지만 컨트롤러는 useState, useEffect, useReducer, useCallback 등의 Hooks을 사용하는 반면에, 일부 컨트롤러는 hooks을 사용하기는 하지만, 컨트롤러는 주로 반복적으로 다뤄지는 데이터를 쉽게 재사용하기 위함임. 2. 컨트롤러와 커스텀 Hooks은 서로 다른 파일 형식을 가짐을 알게됨. 사실이건 지금 현재 하고 있는 프로젝트에서 발견한 차이라 일반화 하긴 어려움. 하지만 차이의 이유를 알.. 2022. 10. 10.
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.07.22{코딩일기} 2022 넥토리얼 코테 후기 확실히 카카오 보단 쉬웠다. 오후 5시부터 오후 9시까지 총 4시간이 주어졌지만 역시 6문제를 모두 다 풀기엔 역부족이었다. 문자열 문제는 풀어도 풀어도 왜 항상 어려운지.. 문자열문제 테케를 35%밖에 못 맞춘게 너무 아쉬워서 시험마치고 혼자 푸니깐 Counter를 이용하면 아주 수월하게 잘 풀 수 있는 쉬운 문제임을 깨달았다.. 몽춍해따.. 1번문제는 15분만에 풀었고 테케도 100%다 통과했고, 6번문제도 테케 100% 다 통과했고, 데이터를 API로 갖고 오는 부분이 좀 낯설었는데 이중 삼중으로 괄호안에 들어가 있어서 당황했다.. 이것만 아니었으면 15분내로 풀었을 문제였다. 음.. 해커랭크로 여러번 풀어봐서 그런가 플랫폼엔 익숙했고 골드5 문제를 계속 풀고 있는데 양을 최소 5배이상 늘려서 빠르.. 2022. 10. 7.
10.06.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-17 챕터리뷰 [ 새롭게 알게된 것 ] 1. useMemo는 배열 업데이트 시 특정함수를 실행시키기 위한 용도임 useMemo 훅을 사용하지 않으면 아래처럼 불필요할때에도 함수가 호출되어 자원 낭비되기 때문임. 아래 상황은 등록버튼을 눌러 user배열 값을 수정하지 않았는데 불필요한 countActiveUsers함수가 호출된 경우임. 이는 input값이 바뀔때에도 컴포넌트가 리렌더링 되기 때문임. function countActiveUsers(users) { console.log('활성 사용자 수를 세는중...'); return users.filter(user => user.active).length; } const count = countActiveUsers(users); return ( 활성사용자 수 : {coun.. 2022. 10. 6.
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.04.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-14~15 챕터리뷰 [새롭게 알게 된것] 1.리엑트로 배열요소를 삭제할땐 해당요소의 상태값 id와 이벤트함수 파라미터를 활용함 기존 코어자바스크립트로 삭제할땐 arr.remove(x)로 삭제할 요소를 바로 제거할 수 있었음. 하지만 리액트에선 App.js에 선언된 onRemove(이름은 상관없음) 함수에 삭제할 버튼의 함수 파라미터에 id값을 넘겨주어 function User({ user, onRemove }) { return ( {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } 삭제하면됨. 참고로 filter또한 깊은복사객체를 반환함. const onRemove = id => { // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬 // .. 2022. 10. 4.
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.30.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-10 챕터리뷰 [ 새롭게 알게 된 것 ] 1. 특정 DOM을 직접 선택해야하는 상황이 발생할땐 useRef라는 Hook을 사용함 일반적으로 js를 사용할땐 DOM Selector같은 함수를 사용해 getElementById 또는 querySelector로 특정DOM 선택 리엑트에선 ref라는 것을 사용함 클래스형 컴포넌트에선 콜백함수 또는 React.createRef 라는 함수를 사용하는데 이는 뒷쪽에서 추후 다룬다함 2. useRef 활용 상황예시 특정엘리먼트 크기를 가져와야 할때 스크롤바 위치를 가져오거나 설정해야 할때 포커스를 설정해줘야 할때 video.js, JWPlayter 같은 HTML5 Video관련 라이브러리 사용시 특정 DOM에 적용할때 D3, chart.js등 그래프관련라이브러리 사용시 특정 DOM에.. 2022. 10. 1.
09.30.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-9 챕터리뷰 [ 새롭게 알게된 것 ] 1. 입력을 여러개이고 출력은 하나일땐 state 자료구조를 객체로 관리하는게 편함 usestate를 여러개 만들고 onChange도 여러개 만들 수 있겠지만 이건 상당히 비효율적임. 아래와 같이 input에 name을 설정하고 이벤트가 발생했을때 name과 nickname을 변경하면 편함. const [inputs, setInputs] = useState({ name: '', nickname: '' }); const onChange = (e) => { const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출 setInputs({ ...inputs, // 기존의 input 객체를 복사한 뒤 [name]: valu.. 2022. 9. 30.
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.
09.28.22{코딩일기} 벨로퍼트와 함께하는 모던 리액트 1-1~1-4 챕터리뷰 [ 오늘 알게된 것 ] 1. DOM Selector API라는 용어 보통 document.querySelector()을 많이 사용했는데 이외에도 document.getElementById()등과 같은 DOM을 변형시키기 위한 작업때 사용한 태그들을 총칭하는 용어임을 알게됨 2. 사용자 인터랙션에 따른 규칙의 멜팅팟해결사 리엑트 DOM을 건드리는 작업이 사용자 인터랙션에 의해 많아질 수록 난잡해졌던 경험이 떠올려졌음. 이를 일일이 자바스크립트 변수로 관리하는 것도 여간 쉽지 않았고, 동적으로 상태를 관리하는게 어려웠던 기억이 남. 그런데 리엑트는 그런 부분을 useState를 활용해 해결할 수 있었던 부분이 좋았음. 리엑트나 앵귤러나 서로 작동방식이 다를뿐 근본목적은 특정 DOM의 속성이 바뀌도록 연결해주.. 2022. 9. 28.
728x90

티스토리툴바