Ellen's Web Note

리액트에서 컴포넌트를 스타일링 할 떄에는 다양한 방식을 사용할 수 있다. 여러 방식 중 딱히 정해진 방식은 없고, 개인의 편의나 회사의 스펙에 맞춰 사용하면 된다. 종류 : css, scss, css-module, styled-components css 기본적인 CSS 스타일링. class -> className sass (syntactically awesome stylesheet) - css전처리기로 복잡한 작업을 쉽게 할 수 있게 히줌. - 스타일 코드의 재활용성을 높여주고 코드의 가독성을 높요 유지보수에 도움. - 확장자는 .scss와 .sass 두가지를 지원. - node_modules 디렉터리의 라이브러리를 호출해서 사용 (경로에 ~를 사용하면 자동으로 node_modules디렉터리로 경로가 지..

라이프사이클 메서드 - 컴포넌트를 처음 렌더링할 때나 업데이트할 때 처리해야 할 작업을 실행시키는 메서드. - 라이프사이클 메서드는 클래스형 컴포넌트 에서만 사용. (단, 함수형 컴포넌트는 Hooks를 사용하여 비슷한 작업을 실행할 수 있음.) - Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행하는 메서드이고, Did접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행하는 메서드로 구분. 컴포넌트가 업데이트 되는 경우. 1. Props가 바뀔 때 2. state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. this.forceUpdate로 강제로 렌더링을 트리거할 때 1. constructor 컴포넌트 생성자 컴포넌트를 만들 때 처음 실행되는 메서드로, state를 초기화할 때 사용..

Ref란? - render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공. - id와 같은 역할을 하지만, ref에서는 컴포넌트 내부에서만 작동하기 때문에 id중복 문제를 해결할 수 있음. //jquery $("#input").val("abc"); $("#input").focus(); const getValue = $("#input").val(); //react const inputRef = useRef(); inputRef.current.value = "abc"; inputRef.current.focus(); const getValue = inputRef.current.value; ref를 사용해야 하는 경우. - 특정 input에 포커스 주기 - 스크롤박스 조작하기 - c..

이벤트 사용 시 주의사항 * 카멜 표기법 사용 onclick -> onClick onkypup -> onKeyUp * 이벤트에는 함수 형태의 값을 전달 onClick={() => console.log('click!')} * DOM요소에만 이벤트 설정 div, button, input등에는 이벤트를 설정할 수 있지만 컴포넌트에는 이벤트를 설정할 수 없음. 이면 MyComponent에 Onclick이라는 props를 전달하는 것. 1. 클래스형 컴포넌트에서 임시 메서드 사용 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 ..

state란? - 컴포넌트 내부에서 바뀔 수 있는 값. - 부모 컴포넌트에서 state를 props로 넘겨줄 경우 하위 컴포넌트는 state를 읽는 용도로만 사용할 수 있음. - 부모 컴포넌트로부터 넘겨받은 state값을 수정해야하는 경우 부모 컴포넌트에서 직접 state를 수정해야 함. - 컴포넌트 타입에 따라 state 사용 방법이 다름. 1. 클래스형 컴포넌트 (state) - this.state에서 state값을 초기화 하고, 값을 변경할 때에는 this.setState를 사용. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 ..

컴포넌트(component)란? * 재사용을 위한 특정 부분(기능)의 코드뭉치(모듈)의 단위 이미지와 같은 레이아웃을 생성할 때 일정관리(헤더) 컴포넌트, 검색 컴포넌트, 일정역역 컴포넌트, 각 일정(input 라인) 컴포넌트 총 4개의 컴포넌트로 구성됨. 컴포넌트 선언방식 1. 함수형 1. 클래스형 컴포넌트보다 선언이 쉬움. 2. 클래스형 컴포넌트보다 메모리가 가벼움. 3. 빌드했을 때 배포 파일이 클래스형 컴포넌트보다 작음. 4. React Hooks가 도입되면서 함수형에서도 state와 라이프사이클 사용이 가능해짐. 2. 클래스형 1. state기능 및 라이프사이클 기능을 사용할 수 있음. 2. 임의의 메서드를 정의할 수 있음. 3. render()함수가 꼭 있어야 하고, 그 안에서 JSX를 반환해..

리액트 프로젝트 만들기 yarn create react-app 'project_name' npm create-react-app 'project_name' 디렉터리 구조 node_modules - Node.js 기본 도구 모음 - npm, yarn으로 설치한 패키지 파일 모음. public - 실제 화면에 보여지는 파일 - Index.html : 화면에 출력되는 HTML : jsx에서 리턴한 가상 DOM을 에 추가해서 실행. - manifest.json : 앱의 홈화면에 보여지는 아이콘, 이름 등을 설정 - Robots.txt : 사이트맵 설정 src - React를 구현할 폴더 - Index.js : 프로젝트 실행 시 제일 처음 접근하는 파일. 경로(route) 설정 - App.js : 프로젝트 실행 시..