Today Hailie Learned

CDD ( Component Driven Development ) ➥ 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식 ➥ 재사용할 수 있는 컴포넌트를 개발한다. ➥ 상향식 개발 Styled-Component (CSS-in-JS가 나오게 된 배경) CSS 전처리기 ( CSS Preprocessor ) ➥ CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 * 각 CSS 전처리기에 맞는 Compiler를 사용해야 한다. (CSS 전처리기 자체만으로는 웹 서버가 인지하지 못함) ➥ 그래서 CSS 파일들을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리할 수 있는 방법이 생긴 것이다. - CSS 전처리기로 가장 유명한 SASS (CSS를 확장해 주는 스크립팅 언어) 장점 :..

useState const [changeData, setChangeData] = useState('') useState는 리액트 라이브러리에서 제공하는 함수인데 컴포넌트 함수가 다시 호출되는 곳에서 변경된 값을 반영하기 위해 state로 값을 정의할 수 있게 해주는 함수이다. state가 변할 때, 이 컴포넌트 함수를 다시 호출하고 싶으면 state를 업데이트하는 함수(set어쩌고)를 호출하면 된다. 왜냐하면 그 함수를 호출해서 state에 새로운 값을 할당하고 싶다고 리액트에게 말하고 그런 다음 함수는 또한 useState로 state가 등록된 컴포넌트는 재평가되어야한다고 리액트에게 말한다. 그래서 리액트는 이 컴포넌트 함수를 다시 실행하고 또한 이 JSX코드를 다시 평가한다. 그리고 지난 번과 비교해..

방법 1. export default를 써주고 import로 받기 예시 - 내보낼 파일 const person = { name:'Max' } export default person 예시 - 받을 파일 (정확한 이름을 써주지 않아도 된다) import person from './person.js' import prs from './person.js' 방법 2. export만 써주고 중괄호 써서 import하기. (파일 안에서 정의된 정확한 이름 사용) 예시1 - 내보낼 파일 const person = { name:'Max' } 예시1 - 받을 파일 import {person} from './person.js' 한 문장으로 작성도 가능하다. 예시2 - 내보낼 파일 export const clean = () ..

React에서 데이터를 다루는 두 가지 방법인 State와 Props State와 Props 차이 Props: 외부로부터 전달받은 값 (인자와 같이 넘겨받을 수 있다.) 함부로 변경될 수 없는 읽기 전용(read-only) 객체 State: 컴포넌트 내부에서 변화하는 값 어떤 것이 State와 Props에 적합할까? 이름 / Props 성별 / Props 나이 / State (매년 바뀜) 현재 사는 곳 / State (이사할때마다 바뀜) 취업 여부 / State (내 상태에 따라 바뀜) 결혼/ 연애 여부 / State (내 상태에 따라 바뀜) Toggle Switch / State (스위치를 on/off 여부에 따라 바뀜 // isOn:true, isOn:false) Props의 특징 - 컴포넌..

컴포넌트 나누는 것에 대해 왜 고민이 필요한가요?? ➥ 애플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 보다 유기적으로 주고받을 수 있도록 설계해야 하기 때문에 React를 이용해 어떻게 애플리케이션을 만들지 설계를 한다면 페이지를 만들기 전에, 어떤 컴포넌트를 만들고 이들을 조합할지부터 구상할 계획을 짜야한다!! SPA는 하나의 페이지를 가지고 있지만, 한 종류의 화면만 사용하지 않는다. WHY? 🤔 페이지 안의 버튼을 누르면 각 버튼에 대한 페이지 화면이 필요하니까! 또한 이 화면에 따라 '주소'도 달라진다! 라우팅(Routing) = 다른 주소에 따라 다른 뷰를 보여주는 과정 / 경로에 따라 변경한다. BUT😬 React 자체에는 이 기능이 내장되어 있지 않다. 그래서 우리가 직접 주소마다 다른..

SPA 등장배경 전통적인 웹사이트 => 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러왔다. 시간이 지나면서 웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되었다. 하지만 이때마다 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰고, 매번 모든 페이지를 불러옴에 따라 더 느린 반응성을 갖게 되었다. 이에 대한 고민을 해결하기 위해 나온 것이 바로 SPA!!! 1990년대 후반에 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주..

컴포넌트란? 하나의 기능 구현을 위한 여러 종류의 코드 묶음이다. // UI를 구성하는 필수 요소이다. // 컴포넌트는 리액트의 심장이다. const Component = () => { return ( {정의1} {정의2} ) }; 컴포넌트를 여러개 만들고 조합해서 어플리케이션을 만들 수 있다. 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있고, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다. 이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다. 이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있다. ➥ 위 그림에서 최상위 컴포넌트인 A가 root (근원)이 되고, 다른 자식 컴포넌트를 가질 수 있다. ➥ 이러한 트리 ..

JSX란? JavaScript XML 리액트에서 UI를 구성할 때 사용하는 문법으로 JS를 확장한 문법이다. JSX는 브라우저가 바로 실행할 수 있는 JS코드가 아니라서 브라우저가 이해할 수 있는 JS 코드로 변환시켜줘야한다. 이때, Babel을 사용한다. Babel가 JSX를 브라우저가 이해할 수 있는 JS로 컴파일한다. 컴파일을 하면 브라우저가 JS를 읽고 화면에 렌더링할 수 있게 된다. JSX를 사용하면 JS만으로 마크업 형태의 코드를 작성해서 DOM에 배치할 수 있게 된다. (CSS, JSX 문법만을 가지고 웹 어플리케이션 개발 가능!) 주의할 점! JSX은 HTML처럼 생겼지만, HTML이 아니기 때문에 “Babel”을 이용한 컴파일 과정이 필요하다. JSX를 왜 써야하지? DOM 코드보다 명시..

리액트란? 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리 입니다. 리액트를 왜 사용하는 걸까? 리엑트의 아래 3가지 특징 덕분에 프론트엔드 개발을 더 효과적으로 할 수 있다. 1. 선언형 2. 컴포넌트 기반 3. 범용성 (다양한 곳에서 활용 가능) 1. 선언형 리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. *개발에서 선언(명시적)이라는 뜻은 코드를 자세히 분석하지 않고도 코드의 의미를 분명히 알 수 있게 작성하는 방식을 의미한다. queryselector로 HTML 내의 코드를 받아와서 JS 파일에서 개발하는 환경은 직관적이라고 볼 수 없다. 반면, 리액트는 JSX라는 HTML..