본문 바로가기

내마음대로만들어보자/React58

[복습]React 주요 개념정리 - Event Listener 이벤트 리스너는 사용자가 어떤 행동을 하는지 지켜보다가 알려주는 것이다. 주로 마우스 클릭, 오버, 키보드 누름 등에 자주 쓰인다. * 참고자료 https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org addEventListener 를 통해 이벤트 리스너를 추가해보자. 1. 클래스형 컴포넌트에서 event lisntener 구독하기 이벤트 리스너는 어떤 이벤트 행동을 지켜보려면 DOM요소가 있어야하므로 componentDi.. 2021. 9. 22.
[복습]React 주요 개념정리 - 함수형컴포넌트 useState() 함수형 컴포넌트에는 state가 없지만 react hook을 통해 state를 가질 수 있다. 1. useState() 로 state 등록 // count에는 state 값이 , setCount는 count라는 state값을 수정하는 함수 // useState( ): () 안에 초기값을 넣어준다. const [count, setCount] = React.useState(3); 2. 예제코드 useState()를 통해 state를 가지고 초기값을 설정해주었다! 하나 추가 버튼을 클릭을 하게되면 addNemo 함수가 실행이 되어 setCount(count+1)을 해주는걸 볼 수 있다. setCount는 count라는 state값을 수정해주는 함수로 정의되어 있다. 하나 빼기 버튼도 마찬가지 원리! 다만, .. 2021. 9. 22.
[복습]React 주요 개념정리 - 라이프사이클 1. 가상돔이란? DOM은 html 단위 하나하나를 객체로 생각하는 모델인데, div태그라는 객체는 텍스트 노드, 자식노드 등등 하위 어떤값들을 가지고 있기때문에 DOM은 트리구조라고한다. DOM 트리 중 하나가 수정될때 필요없는 연산을 없애기 위해 나온게 가상돔이다. * 가상돔의 동작방식 1) 기존 DOM에서 어떤 동작을 수행한다. 2) 새로 그린 DOM과 비교를 한다.(가상돔에 올라갔다고 표현) 3) 바뀐부분만 갈아끼워준다. DOM이 새로그려지는 상황은 처음 페이지 진입했을때, 데이터가 변했을때 다. 2. 라이프 사이클이란? 컴포넌트가 렌더링을 준비한 순간부터 페이지에서 사라질때까지가 라이프 사이클이다. 참고 공식문서 https://ko.reactjs.org/docs/state-and-lifecycl.. 2021. 9. 22.
[복습]React 주요 개념 정리 - styled-components styled-component를 복습해보기전에 SASS, SCSS에 대해 간단히 알아보고 넘어가자. SCSS는 SASS의 3번째 버전에 추가된 친구인데, SASS의 모든 기능을 사용할 수 있고 CSS호환도 잘된다고한다! 이친구 사용을 위해 본격적으로 패키지를 설치해주자! yarn add node-sass@4.14.1 open-color sass-loader classnames 다행히 강의에서 필요한 패키지를 모두 가져다 주셔서 수월하게 진행할 수 있었다! 나 혼자만의 프로젝트를 진행하게된다면 필요한게 뭔지 파악하는것도 중요해 보인다. * 공식문서 & 테스트사이트 https://sass-lang.com/documentation Sass: Documentation Sass is a stylesheet lan.. 2021. 9. 22.

티스토리툴바