🌊 컴포넌트 클래스형 컴포넌트과 함수형 컴포넌트 클래스형 컴포넌트 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다. 임의의 메서드를 정의할 수 있다. import React, { Component } from 'react'; export default class App extends Component { render() { const name = 'ogu'; return {name}; } } 함수형 컴포넌트 클래스형 컴포넌트보다 선언하기 훨씬 편하다. 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다. 결과물의 파일 크기가 더 작다 state와 라이프사이클 API사용이 불가능하다는 단점이 있었으나 v16.8 업데이트 이후 Hooks 기능이 도입되면서 해결되었다. import..

🌊 TIL : 2023년 3월 27일 오늘 배운 것 순수함수 : 동일한 인자가 들어갈 경우 같은 값이 리턴되야한다. 부수적인 효과가 이루어지면 안된다. return 값으로만 소통한다. function add (a, b) { return a + b; } console.log(add(5, 9)) // 14 비순수함수 : let c = 10; function multiple (a, b) { return a * b * c; } console.log(multiple(5, 9) // 450 c = 1 console.log(multiple(5, 9) // 45 Props : props는 읽기 전용이다. 컴포넌트에서 props를 수정해서는 안된다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함..

🌊 JSX : JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. JSX로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태이 코드로 변환된다. JSX의 장점 가독성이 좋다. 활용도가 높다. JSX 문법 감싸인 요소 리액트에서 JSX를 반환할 땐 하나의 태그만 반환해야한다. 다수의 태그를 반환하고 싶을 땐 부모 태그로 감싸줘야 한다. 스타일링을 해야하는 경우가 아니라면 빈 태그를 부모처럼 사용하여도 괜찮다. 자바스크립트 표현 JSX 내부에서 자바스크립트 표현식을 사용할 수 있으며, JSX 내부에서 코드를 {} 중괄호 로 감싸주면 된다. if문 대신 조건부 연산자 jsx 내부의 JS 표현식에서 if문을 사용할 수 없다. 조건에 따..

🌊 리액트 시작하기 리액트의 이해 : 리액트는 오직 V(view)만 신경 쓰는 라이브러리다. 리액트의 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있고 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다. 사용자 화면에 뷰를 보여주는 것을 렌더링이라고 한다. 리액트 라이브러리는 데이터가 변할 때 마다 새롭게 리렌더링 하면서 성능을 아끼고, 최적의 사용자 경험을 제공한다. 초기 렌더링 : 어떤 UI곤련 프레임워크, 라이브러리를 사용하든 초기 렌더링이 필요하다. 리액트에서는 render 함수에 해당한다. render(){...} 이 함수는 컴포넌트가 어떻게 생겼고, 어떻게 자동하는 지에 대한 정보를 지닌 객체를 반환한다. 렌더링 → HTML 마크업 → DOM에 주입 조화 과정 :..

🌊 TIL : 2023년 3월 24일 Props : 외부로부터 전달받은 값, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성, 부모 컴포넌트로부터 전달받은 값. 객체 형태. 함부로 벼 ㄴ경할 수 없는 읽기 전용 객체. 사용방법 1 : 전달하고자 하는 속성을 정의한 후, 전달하고자 하는 값을 중괄호 {}를 이용하여 감싸준다. function Ogu(props) { return ( ) } 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다. props를 이용하여 정의된 값과 속성을 전달 전달받은 props를 렌더링한다. 사용방법 2 : 여는 태그와 닫는 사이에 value를 넣어 전달하기. function Parent() { return ( I'm the parent I'm the eldest child );..