민희의 코딩일지

1- useContext란? React 에서 데이터의 흐름은 위 → 아래 (부모 → 자식)로 Props 를 통해 전달한다. Props 를 사용하여 데이터를 전달할 때는 부모 컴포넌트가 자식 컴포넌트 태그에 일일이 Props 를 넣어 단계별로 전달해줘야 한다. (Prop Drilling: 가장 아랫단에 있는 컴포넌트만 데이터가 필요해도 전달하는 과정에서 데이터는 중간 컴포넌트를 거쳐야 한다. Main 컴포넌트는 데이터가 필요없는데도 Profile 컴포넌트에 데이터를 전달하기 위해서 데이터를 Props 로 받은 뒤 다시 Props 로 넘겨주어야 한다.) 부모 컴포넌트 (App) 자식 컴포넌트 (Header) 앱 내부에서 수많은 컴포넌트들이 공통적으로 필요한 전역적인 데이터가 있을 때 Props 를 이용해서 ..

1- Ajax란? Asynchronous JavaScript And XML: 자바스크립트를 사용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고받는 기술이다. 서버와 비동기적으로 통신함으로 인해 전체 웹페이지를 다시 불러오는 동기 방식과는 다르게 해당 부분의 사용자 인터페이스만을 갱신할 수 있다. (ex. 페이스북에서 좋아요 버튼이 눌릴때마다 페이지가 리렌더링되는 것을 방지) Ajax 사용법 JQuery 설치하여 $.ajax() 사용 axios 설치하여 axios.get() 사용 npm install add axios --save 순수 자바스크립트 문법 fetch() 사용 2- Fetch 란? fetch("", { method: "POST", headers: { "Content-Type": "appl..

1- TailWindCSS란? HTML 안에서, CSS 스타일을 만들 수 있게 해주는 CSS 프레임 워크이다. CSS 프레임 워크란? 레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음이다. CSS 프레임워크 for React JS Tailwind CSS Material UI React Bootstrap Semantic UI Ant Design Materialize Tailwind CSS의 장점 https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentatio..

구조 분해 할당이란? (ES6) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식이다. Clean Code를 위해서 사용한다. 1- 객체 구조 분해 할당 function buildAnimal(animalData) { let accessory = animalData.accessory, animal = animalData.animal, color = animalData.color, hairType = animalData.hairType; } let obj = { accessory: 'horn', animal: 'horse', color: 'pupple', hairType: 'curly' } function buildAnimal(animalData){ let ..

1- Component ‘props’라는 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는 React Element를 반환한다. Class Component React.Component 클래스를 상속 클래스는 return 문을 사용할 수 없으므로, 클래스형 컴포넌트에서는 JS를 반환하기 위해 render() 함수를 사용한다. Function Component props로 받을 객체 인자를 정의하고, JSX를 반환하는 것을 기본 형태로 갖춘다. return 문에서 JSX를 반환할 수 있다. Props, State는 데이터를 다룰 때 사용한다. 2- Props (properties) 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이다. 부모 컴포넌트로부터 받는 데이터이기 때문에 자식 컴포넌트에서느 변경할..

1- React Hooks란? React Hooks란 ReactConf 2018에서 발표된 class 없이 state를 사용할 수 있는 새로운 기능이다. React Hooks 는 Class Component로 사용된 React에서 느낀 불편함과 문제점을 개선하기 위해 개발되었다. 1. 이전방식 (Class Component) import React, { Component } from 'react' export default class Hello extends Component { render () { return ( hello my friends! ) } } 더 많은 기능 제공 더 긴 코드 양 더 복잡한 코드 더딘 성능 2. React Hooks (Functional Component) import Re..

React 생명주기란? 컴포넌트의 생성, 업데이트, 제거 과정을 뜻한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. 컴포넌트를 처음으로 렌더링 할 때, 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다. → 컴포넌트의 라이플사이클 메서드를 사용한다. 라이플사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있고, 함수형 컴포넌트에서는 Hooks 를 사용하여 비슷한 기능을 처리할 수 있다. LifeCycle Method 라이플사이클 메서드 종류는 총 9가지이다. will 접두사가 붙은 메서드: 어떤 작업을 작동하기 전에 실행 Did 접두사가 붙은 메서드: 어떤 작업을 작동..

소스코드: https://github.com/heehminh/23-React-JS-ToDo GitHub - heehminh/23-React-JS-ToDo Contribute to heehminh/23-React-JS-ToDo development by creating an account on GitHub. github.com 만들고자 하는 앱의 UI: 1- 할 일 목록 타이틀 만들기 App.js import React, {Component} from "react"; import "./App.css"; export default class App extends Component { // 클래스형 컴포넌트 안에서는 render 안에 UI를 작성 render() { return( 할 일 목록 ) } } App..