차곡차곡

state는 컴포넌트 내부에서 바뀔 수 있는 값으로, state가 수정 됐을 때 페이지를 다시 그리지 않아도 UI 업데이트가 가능하기 때문에 SPA의 핵심 요소라고 할 수 있다. 리액트에는 클래스형 컴포넌트가 지니고 있는 state와 함수형 컴포넌트에서 useState라는 함수를 통해 사용되는 state 두 가지 종류가 있다. useState 함수는 함수형 컴포넌트에서도 상태 관리를 할 수 있도록 리액트 16.8에서 도입된 Hooks 기능 중 하나다. 함수의 인자에는 상태의 초깃값을 넣어준다. 값의 형태는 숫자, 문자열, 객체, 배열 등 자유롭다. 함수를 호출하면 배열이 반환되는데, 이때 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꿔주는 세터(Setter) 함수이다. state 값을 바꿔야 할..

구현한 것 컴포넌트 구성 궁금한 것 : 요소의 주 콘텐츠(main content)를 정의할 때 사용 css 처음 보는 거 짱 많음 background VS background-color : background-color는 색깔만 지정할 수 있는 반면에 background는 색깔 이외에 image, repeat, attachment, position 등 다른 옵션들도 지정해줄 수 있다. rgba : red, green, blue, alpha(= 투명도로 0에 가까울 수록 투명) em 단위 : 상위 요소 크기의 배수 rem 단위 : 문서의 최상위 요소, 즉 html 요소 크기의 배수 cursor : 마우스 커서 모양 지정 transition : CSS 프로퍼티의 값이 변화할 때 프로퍼티 값의 변화가 일정 시..

컴포넌트는 SPA를 지향하는 React에서 사용하는 앱을 이루는 최소 단위이다. MVC 방식으로 관리되는 기존의 웹 프레임워크는 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있다. 반면 컴포넌트는 MVC의 view를 독립적으로 구성하여 재사용할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다. ☝🏻 MPA vs SPA MPA(Multiple Page Application) : 여러 개의 페이지로 구성된 웹 어플리케이션으로, 사용자가 요청할 때마다 서버에 다른 페이지를 요청해서 받아온다. 전체 페이지를 불필요한 부분까지 다시 렌더링 해야 하기 때문에 상태 유지의 어려움 + 불필요한 로딩이 발생한다는 단점이 있다. SPA (Single Page Application) : 한 개 페이지로 구성된..

props는 properties의 줄임말로 컴포넌트의 속성값이다. 한 컴포넌트에서 다른 컴포넌트로 데이터를 넘길 때, 즉 컴포넌트 간 데이터를 넘겨주는 수단으로 사용된다. 일반적으로 부모 컴포넌트에서 넘겨준 값을 자식 컴포넌트에서 인자로 받아서 사용한다. 받아온 값은 읽기 전용으로 컴포넌트 내부에서 전달 받은 그대로 사용된다. props 값은 컴포넌트에 객체 형태로 전달되어 매개변수를 통해 조회 가능하며, 객체의 비구조화 할당을 통해 축약된 문법으로 객체 속성값을 추출하여 사용할 수도 있다. Props 값 전달 방법 부모 컴포넌트에서 자식 컴포넌트 import 자식 컴포넌트 태그에 속성=”속성값” 할당 ⇒ {속성: 속성값}을 인자로 하여 자식 컴포넌트 호출 자식 컴포넌트에서 매개변수로 값 받아와서 사용 ..

1. JSX란? JSX는 리액트에서 생김새를 정의할 때, 사용하는 문법으로 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScrip의 확장 문법이다. 리액트 컴포넌트의 return문 내에 이러한 형태로 코드를 작성하면, 반환된 내용이 번들링 과정에서 babel을 통해 JSX에서 일반 JavaScript 형태로 변환된다. (* 번들링은 코드가 브라우저에서 실행되기 전, import한 모듈들을 연결하여 합쳐진 파일로 만든 후 브라우저에 최종 렌더링해준다.) (* Babel은 JavaScript의 문법을 확장해주는 도구로서 아직 지원되지 않는 최신 문법이나 편의상 사용하거나 실험적인 JavaScript 문법들을 정식 JavaScript 형태로 변환해준다.) function App() { return ( He..

변수에 숫자나 문자열 할당해서 사용 ex) {name}, {2+3} boolean이나 객체 사용 불가 (* object.name은 가능) jsx는 하나의 태그만 만들 수 있음 그래서 로 전체 묶어주는 거 인라인 스타일 : 객체로 작성, 카멜케이스 각 컴포넌트에 특화된 css css 모듈 사용 (컴포넌트명.module.css) import styles from ‘./Hello.module.css’ 똑같은 클래스명으로 작성해도 다른 스타일 적용 가능 state는 component가 갖고 있는 속성값 궁금한 것 npx vs npm vs yarn ?

작업 환경 설정 1. Node.js 설치 (*최신 버전보다 검증된 LTS 버전 추천) 웹 브라우저 환경 외에서도 JS를 사용할 수 있도록 한다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node -v # 설치 확인 2. Package Manager - Yarn 설치 (*node.js를 설치하면 npm은 자동으로 설치됨) facebook에서 npm의 단점을 보완하여 만든 라이브러리 관리 도구 # Mac os npm install --global yarn # Yarn 설치 yarn -v # Yarn 설치 확인 React 시작 yarn create react-app [앱 이름] # rea..

JSX 문법 1. 하나의 요소로 감싼다. // Error !! function Hello(){ return ( Hello I'm SoHyun ); } function Hello(){ return ( Hello I'm SoHyun ); } // Fragment 태그로 감싸기 function Hello(){ return ( Hello I'm SoHyun ); } // Fragment 축약 function Hello(){ return ( Hello I'm SoHyun ); } 2. 자바스크립트 표현식의 사용 // {} brackets로 감싸기 function Hello(){ const name = 'SoHyun'; return ( Hello I'm {name}! ); } 3. 조건부 렌더링 (1) return..