728x90 {React}48 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. 이전 1 2 3 4 5 다음 728x90
