rosie

CSS BEM 모델이란?BEM(Block-Element-Modifier) 모델CSS 클래스 네이밍 방법론중 하나가독성재사용성 UPCSS 클래스 네이밍 같은 경우에는 CSS의 코드의 가독성, 유지보수, 재사용을 향상시키기 위해 개발자들 사이에서 널리 사용되는 방법론CSS 클래스 네이밍을 3단계로 구조화한 방법Block - 블록독립적으로 존재하며 다른요소에 의존하지 않는 최상위 요소ex. button, header등과 같이 최상위 요소가 블록이 될수 있음Element - 요소블록의 일부로 특정 기능을 수행하는 요소요소는 블록과 함께 사용할때만 의미를 가지고 블록을 기반으로 클래스를 작성함ex. button이라는 블록 하위에 button_text라는 엘리먼트가 있을 수 있고, header라는 블록 하위에 he..

컴포넌트란?리액트 앱을 구성하는 최소한의 단위, 리액트의 기본적인 구성요소즉, 애플리케이션의 구성 요소를 담당하며 재사용가능하고 독립적인 단위로 구성컴포넌트는 UI를 작은 단위로 분리하여 개발하고 유지보수 할수 있도록 하는데 도움을 줌따라서 컴포넌트를 사용하면 코드의 가독성과 재사용성을 높일수 있다는 장점이 있음클래스 컴포넌트 vs 함수 컴포넌트클래스 컴포너트ES6 클래스 사용해서 정의render() 메서드로 UI 반환생명주기 메서드 기능 제공상태관리 기능 제공함수 컴포넌트JavaScript 함수로 정의JSX 반환react-hook 사용하여 생명주기 기능 활용컴포넌트 장점재사용성컴포넌트는 독립적이고 모듈화된 단위로 작성필요한 곳에서 쉽게 재사용 가능가독성과 유지보수성컴포넌트 기반으로 개발을 하게 되면UI..

1. 리덕스 설정 ⅰ. 리덕스 설치 리액트에서 리덕스를 사용하기 위해서는 2개의 패키지를 설채해야함 yarn add redux react-redux 폴더 구조 생성하기 ① src 폴더 안에 redux 폴더를 생성 ② redux 폴더 안에 config, modules 폴더를 생성 ③ config 폴더 안에 configStore.js 파일을 생성함 ❓폴더와파일의 역활 - redux: 리덕스와 관련된 코드를 모두 모아 놓은 폴더 - config: 리덕스 설정과 관련된 파일들을 놓은 폴더 - configStore: "중앙 state 관리소"인 Store를 만드는 설정 코드들이 있는 파일 - modules: State들의 그룹, ex) ToDoList에 필요한 state들이 모여있는 todosljs 파일이 곧 하..

1. LifeCycle ⅰ. 생명주기(LifeCycle) 소개 리액트 생명주기란? 리액트 컴포넌트는 각각 [Mount] -> [Update] -> [Unmount]의 과정을 거침 리액트 생명주기(라이프사이클)란, 컴포넌트 중심 라이브러리의 집합체라고 보면 됨 모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드들이 있음 생명주기 생성될때(mount) 업데이트 할때(update) 업데이트를 할 때는 리렌더링을 같이 고민해야함 제거될때(un-mount) ⅱ. Mount 개요 컴포넌트가 생성될 때를 말함 constructor() getDerivedStateFromProps(nextProps, prevState) render() componentDidMount() 각 메서드 소개 constru..

1. useContext(Context API) ⅰ. useContext란? react context 의 필요성 부모컴포넌트 -> 자식 컴포넌트로 데이터를 전달해 줄 때 props를 사용함 부모 -> 자식 -> 그 자식 -> 그자식의 자식 이렇게 너무 깊어지게 되면 prop drilling현상이 일어나게됨 porps drilling의 문제점은 깊이가 너무 깊어지면 이 prop가 어떤 컴포넌트로부터 왔는지 파악이 어려워짐 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어져 대처가 늦어짐 그래서 등장한것이 react context API => useContext hook을 통해 쉽게 전역 데이터를 관리할 수 있게 됨 ⅱ. context API 필수 개념 createContext: context 생성 Con..

1. React Hooks - useState ⅰ. useState 복습 useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해줌 const [state, setState] = useState(initialState); state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우 불변성을 유지해줘야함 ⅱ. 함수형 업데이터 함수형 업데이트란? useState를 사용하는 방식에는 함수형 업데이트 방식도 있음 setState의 ()안에 수정할 값이 아니라, 함수를 넣을 수 있음 그 함수의 인자에서는 현재 state를 가져올 수 있고, {} 안에서는 이 값을 변경하는 코드를 작성할 수 있음 // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 ..

1. Styled Components ⅰ. CSS -in - Js CSS - in - js 란 자바스크립트 코드로 CSS코드를 작성하여 컴포넌트를 꾸미는 방식 순수 CSS코드를 자바스크립트를 이용해서 CSS 코드를 만들어 내는 것 styled-components란? styled-components는 우리가 리액트에서 CSS - in JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지 패키지란, React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램 패키지들은 누군가에 의해 만들어 진것으로 npm에 모여있음 사용하고자 하는 패키지를 npm install 또는 yarn add 를 통해서 설치할 수 있음 ⅱ. styled-components vscode 터미널에서 아래 명령을..

1. Component ⅰ. Component란? 컴퍼넌트는 리액트의 핵심 빌딩 블록 중 하나 리액트에서 개발한 모든 애플리케이션은 컴포넌트라는 조각으로 구성됨 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어줌 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로 UI 요소를 표현하는 최소한의 단위이며 화면의 특정부분이 어떻게 생길지 정하는 선언체! 리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그래밍 방식으로 구현 => 직접 조작하는 방법(ex. querySelector, id나 class가지고 해당 하는 것을 찾음) 명령형은 어떻게(How)를 중요시 여겨서 프로그램의 제어 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태 선언..

1. State ⅰ. State State란? State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미 State의 목적 - UI(엘리먼트)로의 반영을 위해서 ❓ hook이란? - React에서 제공하고 있는 함수 => React의 api - React안에서 어떤 특정한 기능을 수행하는 것들을 hook이라고 함 State만들기 State를 만들 때는 useState()를 사용 useState() 괄호안에는 초기값을 입력하면 됨 배열 형태로 2가지를 리턴해줌 ex) [state, setState] => 이값을 구조분해할당을 이용하여 useSate로 받게 만듦\ const [count, setCount] = useState(0) // 숫자형 초기값 const [todoList, setTodoList] = us..

1. Props란? ⅰ. props란? 컴포넌트 끼리의 정보교환 방식 부모 컴포넌트가 자식컴포넌트에게 물려준 데이터 반드시 기억해야 하는 2가지 props는 반드시 위에서 아래 방향으로 흐름 => 부모 -> 자식 방향으로만 흐른다!!(단방향) props는 반드시 읽기 전용으로 취급하며 변경하지 않음 부모 컨포넌트에서 자식컴포넌트로 props전달 방법 import React from "react"; const Son = () => { return 나는 아들이에요; }; // 부모 -> 자식으로 정보를 전달 const Mother = () => { const name = "흥부인"; return ; }; const GrandFather = () => { return ; }; const App = () => ..