본문 바로가기

반응형

다채로운 이야기

(90)
React Hooks정리 및 쫌쫌따리 constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드컴포넌트가 업데이트 되는 상황 :props가 변경될때State가 변경될때 -> setState 부모 컴포넌트가 리렌더링 될 때This.forceUpdate로 강제로 렌더링을 트리거할 때라이프사이클 메서드render() -> 라이프 사이클 메서드 중, 유일하게 필수 메서드  React hook정리useState  ->  형태 : const [a, setA] = useState(type) 상태관리 -> 기본적으로 상태관리할 때 사용하는 훅, 근데 렌더링이 느려서 값이 마음대로 바로바로 업데이트가 안됨 useEffect -> 형태 useEffect(() => {}, [파라미터]) -> 파라미터에 useState의 상태를 넣어서 사..
React createPortal정리 리액트로 pj를 할 때, 음.. css적으로 좀 꼬일 때가 있긴 했었다. 그럴때면 그냥 막?노동식으로 css를 하나하나 다 고쳐줬고, 될 때까지 수정을 했는데.. 이런 기능이 있었네..ㅎ...처음에는 포탈이 뭐여라면서 머리로부터 받아드리기 싫어했.. 새로운 거 배울 때마다.. 머리가 좀 거부하는 느낌이랄까..그럴때마다 나를 다그치며 이건 순전히 내 뇌의 장난이야. 운동과 같이 뇌에서도 근육이 키워지려고 힘들어하는 것뿐이야라며 나를 다그친다.. 각설하고 공부한 내용 정리해보자. portal을 사용하는 이유 : css 스타일 충돌을 피하기 위해 dom트리 밖으로 모달을 분리함.-> 즉, 돔 트리 구조와 독립적인 위치에서 컴포넌트를 렌더링할 수 있게 해주는 역할 의문점 : 굳이 왜.. 다른 곳에서 렌더링을 해..
58. Length of Last Word (Javascript) Hi. it's been a while.These days, I've started studying JS again.I solved a JS algorithm problem.This problem is part of the Top 150 Interview Questions,so I have to solve it. anyway, I think it is about Array problem.I first converted the String to an array and then used a for loop and an if statement. We need to save time, so I count backwards like this.   so my submission is~~!!   I'm not sur..
TIL_ React 공부 리액트 컴포넌트에서 요소 여러 개를 하나의 요소롤 꼭 감싸줘야하는 이유 -> virtual don에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 dom 트리 구조로 이루어져 있어야한다.  JSX 내부에서 JS 코드 사용하는 방법은  {}로 감싸주면 된다.  클래스형 컴포넌트  VS 함수 컴포넌트 클래스형일 때, state기능 및 라이프 사이클 기능을 사용할 수 있고 임의 메서드를 정의할 수 있음 클래스형에는 render함수가 꼭 있어야하고 그 안에 jsx를 반환해야함 함수컴포넌트는 선언하기 비교적 쉬움. 메모리 자원도 더 낮음. 그렇다고 해서 성능과 파일 크기가 현저하게 달라지는 것은 아님 stats, life cycle api 사용 불가 -> hooks가 대신함 ..
Udemy 강의 <React - The Complete Guide 2024 (incl. Next.js, Redux)> section3의 coding문제 6 아래의 코드 중, Card 부분을 다른 컴포넌트로 나눠야 한다. 먼저 생각했던 부분은  아래와 같이 porps로 전달하는 방식이었다.  App.js                        href="mailto:blake@example.com"                        content="Blake is a professor of Computer Science at the University of Illinois."/>근데 정답처리가 안 돼서.. children방식으로 사용해 봤다.근데.. 되네..? 분명 이전의 코드 상에 문제가 있었을 수도 있겠지만, 들었던 생각이 왜 굳이 두 가지의 방법을 사용하는 거지? 였다. 그래서 gpt에게 물어봤더니 아래와 ..
TIL 스레드가 뭐지? 스레드 스레드란 : 프로세스 내에서 실제로 작업을 수행하는 주체메인스레드 : UI변경 스레드 / 앱이 처음 시작될 때 시스템이 스레드 하나를 생성하는데 이를 메인 스레드라 하백그라운드 스레드 : 네트워크, 데이터베이스 등 계산량이 많은 작업-> 작업략이 큰 연산이나 네트워크 통신 등은 긴 처리시간이 필요. 만약 메인 스레드에 넣고 작업하면 한 작업이 끝날 때 까지 다른 작업을 처리하지 못하는 현상이 발생 -> 이러한 현상을 방지하고자 백그라운드 스레드를 이용 주의할 점 : 백그라운드 스레드에서 절대로 UI 관련 작업을 하면 안됨
JS Deep Dive 11 capter Today, I'm going to organize what I've studied over the past few days.There is a book called 'The Modern JS Deep Dive.'This is one of the most famous books about JS in Korea, so I chose it. so What I studied? It is about object literals.First of all, before explaining the types of objects, we should understand what an 'object' is. It is a combination of property keys and values.Ex) var p = {    ..
CS50 1 course 음.. 오늘은 뭐 정말 기초적인 부분을 배웠다컴퓨터에 정보를 입력하는 방법 (input), 그걸 원하는 output으로 만들기 위한 과정이 알고리즘이라는 것을.그럼 함수는 무엇일까? 함수는 컴퓨터에게 무엇을 하라고 알려주는 동사와 동일뭔가.. 알고리즘이 함수라고 생각했다. 근데 알고리즘은 문제를 해결하기 위한 단계나 절차, 즉 추상적으로, 그 문제를 해결하기 위한 생각이며, 코드로 작성되기 전에 생각해 내는 아이디어나 논리이다. 그럼 함수는? 함수는 알고리즈을 실제로 코드로 구현한 것. CS = solving problem binary = combine 1 and 0bit (binary digit)의 합성어트랜지스터 : 컴퓨터 안에 있는 스위치, 물리적으로 정보를 표현하고 값을 저장하는 것.gif : 사..

반응형