열정가득한 개발자의 이야기/한땀 한땀 공부 내용 TIL (19) 썸네일형 리스트형 리액트 forwardRef 좀..정리 forwardRef란?-> 상위 컴포넌트에서 전달받은 Ref를 하위 컴포넌트로 전달하는 역할 -> 의문 : 리액트에서는 원래 부모에서 자식으로 props를 넘겨주는데 굳이 Ref까지 사용을 해야하나? 라는 생각이 들음그래서 찾아봄 props는 데이터 전달에 사용:props는 컴포넌트에 데이터를 전달하기 위한 수단. 자식 컴포넌트는 전달받은 props를 이용해서 UI를 렌더링하거나 동작을 결정함. 컴포넌트의 로직이나 상태에 영향을 주고, 주로 데이터나 함수 전달에 사용됨ref는 DOM 요소나 컴포넌트 인스턴스에 직접 접근할 때 사용:ref는 주로 자식 컴포넌트의 DOM 요소나 컴포넌트 인스턴스에 직접 접근하기 위해 사용됨.props로는 DOM이나 특정 요소에 대한 직접적인 접근 권한을 줄 수 없기 때문에,.. 내가 보기 위해 정리한 자바스크립트 methods(splice, split, slice...) indexOf: 호출한 string객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환. 단,첫 번째 등장 인덱스를 찾을 수 없으면 -1. 또한 대소문자를 구분함indexOf(찾는 값, 위치)인데 찾는 값의 위치가 변수인 위치보다 더 작으면, 즉 위치를 더 크게 잡으면 이 또한 -1을 반환함자매품으로 lastIndexOf()도 있음. 이건 같은 문자가 있을 때, 가장 늦게 나온 값의 위치는 반환함 indexOf를 사용해서 문자열 내의 특정 문자 숫자 세기예) var str = "To be, or not to be, that is the question.";var count = 0;var pos = str.indexOf("e"); //pos는 4의 값을 가집니다. while (pos !== -1) { c.. 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트리 밖으로 모달을 분리함.-> 즉, 돔 트리 구조와 독립적인 위치에서 컴포넌트를 렌더링할 수 있게 해주는 역할 의문점 : 굳이 왜.. 다른 곳에서 렌더링을 해.. TIL_ React 공부 리액트 컴포넌트에서 요소 여러 개를 하나의 요소롤 꼭 감싸줘야하는 이유 -> virtual don에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 dom 트리 구조로 이루어져 있어야한다. JSX 내부에서 JS 코드 사용하는 방법은 {}로 감싸주면 된다. 클래스형 컴포넌트 VS 함수 컴포넌트 클래스형일 때, state기능 및 라이프 사이클 기능을 사용할 수 있고 임의 메서드를 정의할 수 있음 클래스형에는 render함수가 꼭 있어야하고 그 안에 jsx를 반환해야함 함수컴포넌트는 선언하기 비교적 쉬움. 메모리 자원도 더 낮음. 그렇다고 해서 성능과 파일 크기가 현저하게 달라지는 것은 아님 stats, life cycle api 사용 불가 -> hooks가 대신함 .. 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 = { .. 공부한거 정리 공부하면서 비록 컴퓨터에 관한 공부지만 아날로그식으로 손글씨를 자주 씁니다. 그래서 좀.. 내용이 두서없을거예요그냥 제 기억을 위해 정리한 내용이라.. 1. callback함수일단 이 함수 자체를 이해하는거가 너무 힘들었습니다. 굳이 왜 써야하는지 그리고 왜 파라미터에 왜!! 함수가 들어가서 날 그리도 힘들게 하는건지.. 그래서 gpt한테 물어봤어요. 대체 왜 쓰냐고... 그러니 아래와 같이 알려주더라구요 callback 함수를 인자로 사용하는 이유는 주로 다음과 같습니다:비동기 작업 처리: JavaScript에서 비동기 작업을 처리할 때, 특정 작업이 완료된 후에 실행할 코드를 지정할 수 있습니다. 예를 들어, 서버로부터 데이터를 가져오는 동안 기다릴 필요 없이 다른 작업을 계속 진행할 수 있습니다.코.. 이전 1 2 3 다음