WEB/HTML CSS JS (75) 썸네일형 리스트형 [React.js] 7. hook useEffect 컴포넌트에는 라이프사이클이 있다. 마치 생명이 시작되고 끝나기까지 과정이 컴포넌트에도 똑같이 진행된다. useEffect를 소개하기전 컴포넌트 라이프사이클에 대해 먼저 알아보자. 컴포넌트 라이프 사이클 마운트 업데이트 언마운드 마운트 컴포넌트 인스턴스가 DOM에 삽입될 때 실행되는 메서드 호출 순서 constructor() static getDeriverdStateFromProps() render() componentDidMount() 업데이트 props, state가 변경되어 컴포넌트가 다시 렌더링될 때 메서드 호출 순서 static getDeriverdStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componen.. [React.js] 6. Event React에서 제공하는 이벤트는 여러가지 있다. React Event 종류 Clipboard Event onCopy onCut onPaste Composition Event onCompositionEnd onCompositionStart onCompositionUpdate Keyboard Event onKeyDown onKeyPress onKeyUp Focus Event onFocus onBlur Form Event onChange onInput onInvalid onReset onSubmit Generic Event onError onLoad Selection Event onSelect Touch Event onTouchCancel onTouchEnd onTouchMove onTouchStart UI .. [React.js] 5. hook useState 부모 컴포넌트에서 설정하는 props가 아닌 컴포넌트 내부에서 변경 가능한 state를 알아보자. 마찬가지로 함수형 컴포넌트 state만 정리한다. 클래스형과 달리 함수형은 hook 함수를 이용해 상태를 관리한다. useState 함수형 컴포넌트의 가변적인 상태를 관리하는 함수다. 부모 컴포넌트인 App의 자식 컴포넌트 StateEx를 만들어주었다. import React, {useState} from 'react'; const StateEx = () => { const [name, setName] = useState('김아무개'); const onClick1 = () => setName("마홍로"); const onClick2 = () => setName("아무개"); return ( 마홍로 아무개 {.. [React.js] 4. 컴포넌트 component React 컴포넌트는 클래스형, 함수형 2가지가 있다. 앞으로 함수형 컴포넌트만 정리할 생각이다. 그 이유로 클래스형 컴포넌트에서 생기는 문제와 다른 객체지향언어와 다른 자바스크립트의 this 사용법 때문에 더 보편적으로 사용될 수 있는 함수형 컴포넌트 권장한다. 함수형 컴포넌트 기존에 만들어져 있는 App.js가 화살표 함수로 만들어진 함수형 컴포넌트이다. 이제 새로운 컴포넌트를 만들어보자. MyComponent.js 파일을 만들어준다. 파일에는 vscode 확장 reactjs code snippet, rsc 키워드로 컴포넌트를 만든다. import React from 'react'; const MyComponent = (props) => { return ( 안녕 내 이름은 {props.name}야 ).. [React.js] 3. 요소 element React에서 요소란 브라우저 DOM 엘리먼트와 달리 plain 객체며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM를 업데이트한다. element index.js를 한번 살펴보자. root를 만들어 렌더링하는 작업을 하고 있다. 내부에 있는 App 태그는 컴포넌트이다. 이걸 element hello world로 변경해보자. 기존에 있던 import App을 주석처리 해줘야 제대로 작동된다. 불변객체 element element는 불변객체이기 때문에 생성 이후 변경할 수 없다. 변경을 원하면 새로운 엘리먼트를 생성하고 render 함수에 전달하면 ReactDOM은 기존 엘리먼트와 변경된 엘리먼트를 비교해, 변경된 부분만 따로 업데이트 한다. [React.js] 2. JSX 기본 문법 이제 설치를 완료했으니 JSX 기본적인 문법을 알아보자. React.js는 말 그대로 자바스크립트 라이브러리라 당연히 자바스크립트 문법을 따른다. jsx는 기존 자바스크립트에는 없는 부분이다. JSX 자바스크립트 변수 선언 키워드는 const, let, var 이렇게 있다. const 상수(한번 선언하면 변경 불가능) let 변수(블록 단위) var 변수(함수 단위) 중괄호 { } jsx에서 선언한 변수를 중괄호를 사용해 html 태그 안에 끼워넣을 수 있다. 그리고 중괄호 내부에서 삼항연산자 같은 간단한 조건식을 사용할 수 있다. import './App.css'; function App() { const str1 = "const_str"; var str2 = "var_str"; let str3 = ".. [React.js] 1. 준비 작업(ft. hello world) 이번엔 React를 시작할 생각이다. react.js는 라이브러리로 view 화면을 만드는데 사용한다. install 자세한 내용은 잘 모르겠고 일단 설치부터 해보자. 1. node.js node.js는 자바스크립트 언어로 백엔드에서 프로그래밍 할 수 있게 해준다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. visual code 에디터로 visual code를 사용한다. extension으로 eslint, reactjs code snippet, prettier-code formatter를 설치한다. https://code.visualstu.. [bootstrap5 따라 만들기] 8. header 이번에는 지금까지 만든 것들을 조합해서 header를 만들 생각이다. header 태그에 Navbar, Offcanvas, Dropdown 이렇게 3가지를 섞어 볼 생각이다. bootstrap5에서 제공하는 header 예제 이렇게 생긴 헤드 예제들을 보여준다. 반응형으로 모바일화면에서는 한줄인 navbar가 두줄, 세줄로 변한다. navbar와 큰 차이점은 없어 보인다. 구조를 한번 살펴보자. 어찌된게 navbar보다 더 단순하다. 아마 toggle 버튼과 search form이 없어서 같다. 이것보단 작성한 navbar를 그대로 집어넣어 offcanvas와 결합 해야겠다. 즉 이런식으로 만들어 봐야겠다. 그리고 지난번에 만든 offcanvas는 non-modal처럼 움직였는데, 이번에는 주변 클릭을 .. 이전 1 2 3 4 5 6 ··· 10 다음
