코딩하는라민

[React] state 컴포넌트가 데이터를 다루는 방법으로는 props 를 이용한 방법, state 를 이용한 방법, contet 를 이용한 방법이 있다. 📌 state 란? 클래스형 컴포넌트에서는 state를 통해서 기억할 수 있는 임의의 데이터를 관리할 수 있다. 하지만 함수형 컴포넌트에서는 그렇게 하지 못한다. 그대신 함수에서는 React Hooks 이라는 것을 제공해 state 를 관리할 수 있다. 📌 state 는 언제 사용하는가? 컴포넌트가 정보를 계속 추적 해야하는 경우, state를 생성하거나 업데이트하고, 사용할 수 있다. 📌 props 와의 차이 값이 변경되면 새로운 return 값을 만들어서 UI를 바꿔준다. 컴포넌트에 prop 을 입력하면 컴포넌트 함수가 처리해서 return 값을..

[React] 이벤트 처리하기 📌 이벤트 처리하기 DOM 엘리먼트에서 이벤트를 처리하는 방식과 유사하다. ✅ 이벤트명은 카멜 케이스를 사용 이벤트 핸들러는 문자열이 아닌 함수로 전달한다. Hello React ✅ false 를 반환해도 기본 동작을 방지할 수 없다. welcome to my blog 따라서 이벤트의 기본 동작을 방지하기 위해 preventDefault 를 사용해야한다. function hello(e){ e.preventDefault(); alert('Hello'); } welcome to my blog ✅ 엘리먼트가 생성된 후에는 addEventListener를 호출할 필요가 없다. 엘리먼트가 처음 렌더링될 때 addEventListener를 제공하면 된다. 📌 클래스 컴포넌트 사용 시,..

[React] 컴포넌트(Component)와 Props 📌 컴포넌트 앱을 이루는 최소한의 단위를 말한다. 기존의 HTML 문서는 반복적인 부분을 단순히 하드코딩하여 재사용이 불가능했지만, 리액트에서는 컴포넌트를 통해 UI를 `재사용 가능`한 `조각`으로 나눠서 각각 관리할 수 있다. 📌 함수 컴포넌트 function Cafe(props){ return latte } props를 인자로 받아 react 엘리먼트를 반환한다. 최근에 함수형 컴포넌트를 많이 사용한다. 클래스 컴포넌트보다 간결하다. 📌 클래스 컴포넌트 ES6 class 를 사용하여 컴포넌트를 정의할 수도 있다. class Cafe extends React.Component { render(){ return latte } } 함수 컴포넌트보다 더..

[React] JSX 이해하기 📌 사용자 정의 컴포넌트 ✅ Import 상단에 다른 곳에 정의된 코드를 불러와 현재 문서에서도 사용할 수 있게 해준다. 리액트 라이브러리 불러오기 import React from 'react'; JSX 를 사용하기 위해서는 React 라이브러리를 파일로 불러와야한다. 단, cdn 으로 스크립트 태그를 넣었다면 React 는 전역변수이기 때문에 별도로 불러올 필요가 없다. CSS 파일 불러오기 import './style.css'; 이미지 불러오기 import logo from './logo.svg'; ✅ 렌더링 // HTML 파일 이 안에 들어가는 모든 요소를 ReactDOM에서 관리한다. React 에서는 일반적으로 하나의 루트 DOM 노드가 있다. 렌더링하기 위해서는 ..

[React] 리액트(React) 시작하기 / JSX와 create-react-app 📌 리액트란? 사용자 인터페이스를 만들기 위한 라이브러리이다. 다른 라이브러리들과 함께 특정 환경을 렌더링하는데 사용한다. → 프레임워크 ❌ 라이브러리 ⭕ 📌 자바스크립트와 다른점 리액트는 JSX 구문을 사용한다. JSX 구문은 자바스크립트의 구문을 확장한 HTML과 유사한 코드이다. 📌 리액트 사용하기 리액트를 브라우저 환경에서 사용하기 위해서는 html 파일에 react 와 react-dom 스크립트를 넣어줘야한다. 📌 JSX JSX 는 리액트와 함께 사용한다. 리액트에서 반드시 필요한 것은 아니다. 다만, JSX 를 사용하면 보다 코드가 더 간단해진다. JSX 는 DOM 요소를 추상화한 자바스크립트 객체인 Reac..

[JavaScript] 클래스와 접근자 프로퍼티(getter함수, setter함수) 📌 접근자 프로퍼티란? 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티이다. 접근자 함수에는 getter 함수와 setter 함수가 있다. 📌 getter 함수 getter 함수는 프로퍼티를 읽으려고 할 때 실행된다. 예를 들어서 콘솔창에 값을 출력해본다거나, 참조할 때 사용한다. class Cafe { constructor(menu){ this.menu = menu } get menu(){ return `${this._menu}를 주문하시겠습니까?`; } set menu(value){ this._menu = value; } } const cafe = new Cafe('milk'); con..

[JavaScript] 클래스 📌 클래스란? 클래스는 객체를 생성하는 일을 한다. 그냥 객체를 생성하는 것이 아닌 `재사용 가능한 객체`를 생성한다. 즉, 클래스는 마치 붕어빵틀과 같은 역할을 하는 것! MDN 에서는 클래스를 객체를 생성하기 위한 템플릿이라고 정의하고 있다. 📌 클래스는 언제 등장했나? ES6 이후 등장 ES5 의 클래스 의미와는 다른 문법과 의미를 가진다. 📌 클래스 정의 클래스를 정의할 때는 `파스칼 케이스`를 사용해야 한다. 즉, 클래스명은 대문자로 시작해야 한다. class City { ... } 📌 클래스를 정의하는 방식 클래스를 정의하는 방식에는 `class 선언 방식`과 `class 표현식 방식` 두 가지 방법이 있다. // 선언 방식 class City { } // 표현식..

멋사 프론트엔드 스쿨 4기 [git/github] 깃 저장소로 옮기기 원격 저장소 추가 리모트 저장소 추가 git remote add origin https://github.com// 기존 워킹 디렉토리에 새 리모트 저장소를 쉽게 추가할 수 있다. 저장소 주소 확인하기 git remote get-url 기존 원격 저장소는그대로 두고 추가하기 git remote add 저장소이름2 기존 원격 저장소 이름 변경 git remote rename 기존 원격 저장소를 삭제 git remote remove 원격 저장소 목록 조회하기 git remote -v https://github.com// (fetch) https://github.com// (push) [push] 깃 로컬 브랜치를 원격 저장소에 업로드하기 g..

멋사 프론트엔드 스쿨 4기 [git/github] 로컬 저장소와 커밋 깃이 관리하는 파일로 만들어주기 git status 1 On branch main 2 No commits yet 3 Untracked files: 4 (use "git add ..." to include in what will be committed) 5 6 nothing added to commit but untracked files present (use "git add" to track) 1 : 현재 브랜치는메인 2 : 아직 커밋할것 없음 3 : Untracked files = 아직 깃이 관리를 하지 않았다. 5 : 빨간색 : 워킹 디렉토리에 변경된 사항이 발생되었다고 알려주는 것. → 워킹디렉토리에 있는 상태이다. 스테이징 st..

멋사 프론트엔드 스쿨 4기 [git/github] 깃 초기화 깃 초기화 git init init : initialization 의 약자 일반 저장소를 깃 저장소로 초기화시킨다 master 브랜치명 main으로 변경하기 git branch -m main 영구적으로 main 으로 바꾸기 git init -b main 폴더를 일반 저장소로 만들기 rm -r .git .git 디렉토리를 다시 삭제해줌과 동시에 브랜치가 없어진다. 즉, git 이 관리하지 않는 일반 저장소라는 의미이다. 초기 브랜치 확인 git config --list init.defaultbranch=main이라고 되어 있어야 함 명령어로 초기 브랜치 변경하기 git config --global init.defaultBranch main ❔ 갑..