일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 애플 디벨로퍼 아카데미
- 애플 디벨로퍼 아카데미 후기
- useReducer
- Swift 디자인패턴
- OS
- SWIFT
- 앱 비교 프로젝트
- Apple Developer Academy @ POSTECH
- global soop
- react
- swift문법
- iOS 개발 오류
- memoization
- StateObject
- 동시성 프로그래밍
- 운영체제
- 네이버 부스트캠프
- 치지직
- 데이터베이스 공부
- 네이버 치지직
- ObservableObject
- 애플 디벨로퍼 아카데미 21주차 회고
- 데이터베이스
- Swift 문법
- 숭실대
- ObservedObject
- 제앱소
- thread safe
- Swift 기능
- 소프트웨어분석및설계
- Today
- Total
목록분류 전체보기 (285)
사과하는 제라스
1. CSS 2. Sass, Scss 3. CSS Module 4. Styled-component {...} import styled, { css } from "styled-components"; const Box = styled.div` background: ${(props) => props.color || "blue"}; -> props로 값을 전달해주어서 적용시킬 수가 있음. padding: 1rem; display: flex; width: 1024px; margin: 0 auto; @media (max-width: 1024px) { width: 768px; } @media (max-width: 768px) { width: 100%; } `; const Button = styled.button` b..
정리보단 지식 쌓기 느낌으로 정리하였다. - React.StrictMode란? useEffect를 사용한 코드에 문제가 있는지 없는지 감지하기 때문에 console.log() 코드가 두번 실행이 됨. - useEffect를 통해 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떤 작업을 수행하고 싶을 땐, useEffect에서 뒷정리(cleanup) 함수를 반환해 주어야 함. -> 렌더링될 때마다 뒷정리 함수가 계속 나타남, 뒷정리 함수가 호출될 때는 업데이트되기 직전의 값을 보여줌. 오직 언마운트될 때만 뒷정리 함수를 호출하고 싶으면 useEffect 함수의 두번째 파라미터에 []를 넣으면 됨. - 리듀서: 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태를 반환..
라이프사이클 메서드의 종류는 총 9가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드 카테고리는 총 3가지로 나뉨 1. 마운트 2. 업데이트 3. 언마운트 마운트 : DOM이 생성되고 웹 브라우저 상에 나타나는 것. 컴포넌트 만들기 -> constructor -> getDerivedStateFromProps -> render -> componentDidMount 업데이트 : props가 바뀔 때 / state가 바뀔 때 / 부모 컴포넌트가 리렌더링될 때 / this. forceUpdate로 강제로 렌더링을 트리거할 때 업데이트를 발생시키는 요인(ex. props변경, state 변경, 부모 컴포넌트 ..
map() 함수란? : 반복되는 컴포넌트를 렌더링할 수 있는 것. arr.map(callback, [thisArg]) - callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 currentValue, index, array가 있음. - thisArg: 선택적으로 쓸 수 있는 항목으로, callback 함수 내부에서 사용할 this 레퍼런스임. 상태 안에서 배열을 변형할 때는 배열에 직접 접근하여 수정하는 것이 아니라 concat, filter 등 내장 함수를 사용하여 새로운 배열을 만든 후 이를 새로운 상태로 설정해 주어야 함.
ref는 언제 쓸까...!? -> DOM을 꼭 직접적으로 건드려야 할 때 DOM을 꼭 사용해야 하는 상황 1. 특정 input에 포커스에 주기 2. 스크롤 박스 조작하기 3. Canvas 요소에 그림 그리기 등등... import React, { Component } from "react"; import "./ValidationSample.css"; class ValidationSample extends Component { state = { password: "", clicked: false, validated: false, }; input = React.createRef(); handleChange = (e) => { this.setState({ password: e.target.value, }); ..
이벤트: 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것. 이벤트 사용 시 주의사항 1. 이벤트명은 카멜 표기법으로 작성 2. 실행할 자바스크립트 코드가 아닌 함수 형태의 값을 전달하는 것임. 3. DOM 요소에만 이벤트를 설정할 수 있음. 이벤트 종류 Clipboard / Touch / Composition / UI / Keyboard / Wheel / Focus / Media / Form / Image / Mouse / Animation / Selection / Transition 이벤트 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. -> 네이티브 이벤트와 달리 이벤트가 끝난 후 초기화되므로 정보를 참조 불가능... ∴ 비동기적으로 이벤트 객체를 참조할..
props 기본값 설정: defaultProps //MyComponent.js const MyComponent = props =>{ {...} } //이렇게 적어주면 props로 name을 못 받아올 시 정해진 값으로 default 값을 넣어줌. MyComponent.defaultProps = { name: '기본 이름' } 태그 사이의 내용을 보여 주는 Children //MyComponent.js const MyComponent = props =>{ return ( {props.children} //이렇게 해주면 자식 컴포넌트에서 Mycomponent 태그 사이에 넣어준 JSX가 넘어오게 됨. {...} ) } 비구조화 할당 //MyComponent.js const MyComponent = props..
JSX: Javascript의 확장 문법으로 XML과 매우 비슷하게 생김. 장점 1. 보기 쉽고 익숙함: HTML 코드 작성하는 거랑 비슷해서 좋음. 2. 더욱 높은 활용도: HTML 태그들을 컴포넌트 작성할 때 그대로 사용할 수 있기에 편함. - React 컴포넌트에서는 요소 여러개를 왜 하나의 요소로 꼭 감싸줄까? : 'Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다' 는 규칙 때문. 배운 JSX 문법 1. JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 없음. 2. &&, ||로 조건부 렌더링 //아래는 null을 쓰는 식으로 조금 의미없는 코드를 쓰지만... {name==='리액트' ? 리액트입..