목록2-2/모바일 웹 구축 실무 (22)
브래의 슬기로운 코딩 생활
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dj69ZG/btsAaiLR7cP/SghBRU9wLMiKhlOV8uuf6K/img.png)
컨텍스트(Context) 컨텍스트란 무엇인가? 컴포넌트 간 데이터 전달 방식 리액트 컴포넌트 사이에서 props를 통해 데이터를 전달하는 방식 부모에서 자식으로 단방향 전달 여러 컴포넌트에 걸쳐 자주 사용되는 데이터의 경우 depth가 깊어질수록 반복적인 코드 생성, 사용하기 불편 Context - React 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있도록 고안된 방법 - 컴포넌트 트리를 통해 곧바로 컴포넌트에 데이터를 전달하는 방식 어떤 컴포넌트든지 데이터에 쉽게 접근할 수 있음 데이터를 한곳에서 관리 - 코드가 단순해지고 디버깅에 유리 언제 컨텍스트를 사용해야 할까? 여러 컴포넌트에서 자주 사용하는 데이터를 사용할 경우 사용자의 로그인 여부, 로그인 정보, UI 테마, 현재 선택된 언어 e..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c70TP3/btszlJiuLDV/dPsTGOh0MEtpzVVSG2fm7k/img.png)
리스트와 키란 무엇인가? 리스트(List) •같은 아이템을 순서대로 모아놓은 것 •리스트를 위해 사용하는 구조 – 배열 •배열 – 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것 ◦키(Key) •각 객체나 아이템을 구분할 수 있는 고유한 값 - 리액트에서는 배열과 키를 사용하여 반복되는 다수의 엘리먼트를 쉽게 렌더링할 수 있음 여러 개의 컴포넌트 렌더링하기 컴포넌트 반복 구조 Array.map() •배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 currentValue : 처리할 현재 요소 index : 처리할 현재 요소의 인덱스 array : map()을 호출한 배열 리스트의 키에 대해 알아보기 리스트의 키 •리스트에서 아이템을 구분하기 위한 고유한 값 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/6KENR/btszgA2aSef/vLmLbxuc47qV2ppq8QHKVK/img.png)
조건부 렌더링이란? 조건부 렌더링(Conditional Rendering) •어떠한 조건에 따라서 렌더링이 달라지는 것 •조건문의 결과 true/false에 따라서 렌더링을 다르게 하는 것 ex. 조건문의 값이 true이면 버튼을 보여주고 false이면 버튼을 가림 자바스크립트의 Truthy와 Falsy truthy - true는 아니지만 true로 여겨지는 값 - { } (empty object) - [ ] (empty array) - 42 (number, not zero) - “0”, “false” (string, not empty) flasy – flase는 아니지만 flase로 여겨지는 값 - 0, -0 (zero, minus zero) - 0n (Bigint zero) - ‘ ‘, “ “, ` ..
npx create-react-app ? : ? 리액트 프로젝트 만들기 npm start: 프로젝트 실행 리액트의 장점 빠른 업데이트, 빠른 렌더링 속도 모바일 앱 개발 가능 리액트의 단점 방대한 학습량, 높은 상태 관리 복잡도 Node.js와 npm 설치 JSX를 쓰면 코드가 간결해지고 생산성과 가독성 향상 엘리먼트 - 리액트 앱의 가장 작은 블록 리엑트 엘리먼트는 DOM엘리먼트의 가상표현 엘리먼트를 렌더링하기 위해 ReactDOM.createRoot( ); render( ) 함수 사용 엘리먼트 업데이트는 새로운 엘리먼트를 생성해 바꿔치기 하는 방식 리액트는 컴포넌트 구조이다 컴포넌트 구조란 페이지가 컴포넌트로 구성되는 것을 말한다. Props는 리액트 컴포넌트의 속성이다 Props를 사용하는 법은 J..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c3I83l/btsxsmwsjBP/u0KoEUksOwkBvt7ePjMBA0/img.png)
이벤트 처리하기 이벤트(Events) •브라우저에서 사용자의 조작이나 환경의 변화로 벌어진 사건 ex. 사용자가 버튼을 클릭한 사건 – 버튼 클릭 이벤트 이벤트 핸들링 •다양한 이벤트를 원하는 대로 처리하는 것 이벤트 핸들러(Event Handler) •어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수 •이벤트 리스너(Listener)라고도 함 클래스 컴포넌트의 이벤트 처리 함수 컴포넌트의 이벤트 처리 Arguments 전달하기 Arguments (매개변수) ⁃함수에 전달할 데이터 (event handler에 전달할 데이터) - 요약 - 이벤트란? ⁃사용자가 버튼을 클릭하는 등의 사용자의 조작이나 환경의 변화로 벌어진 사건 이벤트 처리하기 DOM의 이벤트 •이벤트의 이름을 모두 소문자로 표기 •이벤..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cFE6Tt/btsxsS2VW76/T1tapFHmW5CrkDQUIkPYpK/img.png)
훅이란 무엇인가? Hooks Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수 •Hook - 갈고리 •원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 기능 •리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것 - 이 때 실행되는 함수가 훅 •훅의 이름은 모두 use로 시작 useState() useState() - state를 사용하기 위한 훅 •함수 컴포넌트에서는 기본적으로 state를 제공하지 않기 때문에 state를 사용하려면 useState() 훅을 사용해야 함 useState() 사용법 •useState()를 호..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Ldoxa/btsxp2rYekf/jCAB9Ae1W3lN1kPiWEtqN1/img.png)
State State란? •리액트 컴포넌트의 상태 •리액트 컴포넌트의 변경 가능한 데이터 •state는 컴포넌트를 개발하는 개발자가 직접 정의 State 정의할 때 주의사항 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함 -state가 변경될 경우 컴포넌트가 재렌더링 됨 -렌더링이나 데이터 흐름과 관련 없는 값을 포함하면 불필요한 렌더링이 발생하여 성능 저하 -그외 값은 컴포넌트의 인스턴스 필드로 정의 State 정의 •클래스 컴포넌트 - 생성자(constructor)에서 state 정의 •함수 컴포넌트 - useState()라는 훅을 사용해서 정의 State의 특징 •state는 정해진 형태가 있는 것이 아니라, 일반적인 JavaScript 객체 •state는 정의된 이후 자바스크립트..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Pes1v/btsvqApzWOT/YaAAHkigIK1SXzMnlLIDY1/img.png)
컴포넌트와 Props 컴포넌트 기반 구조 (Component-Based) •컴포넌트 - 독립적인 기능을 수행하는 작은 기능 단위 모듈 •리액트에서는 모든 페이지가 컴포넌트로 구성됨 •하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있음 -레고 블록을 조립하는 것처럼 컴포넌트를 조합해서 사용 •컴포넌트 사용 - 개발 시간을 줄이고 유지보수 비용도 줄일 수 있음 함수와 리액트 컴포넌트 리액트 컴포넌트 •어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴 •객체 지향 개념에서 나오는 클래스와 인스턴스의 개념과 비슷 Props •Property - 속성 •리액트 컴포넌트의 속성 Props - 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 •컴포넌트의 모습..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/o4jGZ/btsvaE1Ph11/y6QKK5w8cmekgPhBACaRN1/img.png)
리액트란? 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 SPA를 쉽고 빠르게 만들수 있도록 해주는 도구 ◦SPA (Single Page Application) - 단일 페이지로 구성된 웹 어플리케이션 - 하나의 HTML 틀을 만들어 놓고, 사용자가 특정 페이지를 요청할 때, 그 페이지에 해당하는 콘텐츠를 가져와서 동적으로 페이지의 내용을 채워서 보여주는 방식 리액트의 장점 빠른 업데이트와 렌더링 속도 재사용성이 높은 컴포넌트 기반 구조 활발한 지식 공유와 커뮤니티 리액트 네이티브를 통한 모바일 앱 개발 가능 리액트의 단점 방대한 학습량 높은 상태 관리 복잡도 엘리먼트 렌더링 엘리먼트 어떤 물체를 구성하는 성분 리액트 앱을 구성하는 가장 작은 블록들 DOM 엘리먼트 ⁃HTML 요소 리액트 엘리먼..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/btNVGu/btst5OqJKxM/43F1mya4Uu9A8ccCkcQR91/img.png)
오늘부터는 본격적으로 리엑트를 배웠다. 일단 내가 만든 html에 리엑트를 추가 하는 것 부터 실습했다. https://ko.legacy.reactjs.org/docs/cdn-links.html https://ko.legacy.reactjs.org/docs/add-react-to-a-website.html create-react-app (CRA) ⁃리액트로 웹 애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태의 프로젝트를 생성해 주는 도구 npx - execute npm package binaries - npm - node.js 의존성, 패키지 관리 (설치/삭제) - npx - node.js 패키지를 실행시키는 하나의 도구 패키지의 최신버전 파일을 불러와 설치/실행하고 사용 후에는 해당 패키..