creamymood의 개발 공부 발자취 💭

클래스형 컴포넌트야 .. 우리 이제 그만 만나면 안될까 ..  응 안돼.. 기술 면접도 봐야하고, 예전 코드도 읽을 줄 알아야지 ..  💡✨class형 컴포넌트의 생명 주기 클래스형 컴포넌트가 생성될 때, 내부에 생성된 인스턴스에 상태값이 변경 될 경우, 바뀐 값에 맞춰서 리렌더링 된다.그리고 화면에서 없어지면 인스턴스 사용이 끝나며, 생명 주기를 마치게 된다.화면에 다시 표시할 땐, 새로운 인스턴스를 새롭게 생성하게 되고, 겪었던 생명주기 같이 겪게 된다.  1. 생성될 때.클래스 문법으로 정의된 컴포넌트를 화면에 표시한 인스턴스가 생성되는 것과 같다.생성될 때에는 클래스 컴포넌트에서의 컨스트럭터 함수가 실행이 되며, 인스턴스가 생성되고생성된 인스턴스에서 렌더라는 메소드를 사용해서 화면에 컴포넌트가 ..

생명주기란 말.. 너무 와닿지 않아 너.. 생명 주기 때문에 어려움을 겪고 계신 여러분들,, 제 글을 보며 조금 도움이 되길 바랍니다...    그냥 생명주기라고 하지말고 관리타이밍 이라고 이름 붙이면 안되니.. 왜 생명주기인데..    공부하다보니 느낌이 딱 이래서지피티한테 이렇게.. 말했더니  와—진짜 날카롭고 좋은 질문이다 Jane 😎사실 너 말대로 "관리 타이밍" 같은 말이 훨씬 직관적으로 느껴지기도 해.근데 왜 굳이 "생명주기(lifecycle)"라는 표현을 쓸까? 간단히 정리해볼게!  착하고 상냥한 지피티.. 항상 고마워.   👩🏻‍💻 왜 "생명주기"라고 부를까?리액트에서 컴포넌트는 하나의 생명체처럼 동작해.탄생 (Mount) — 화면에 처음 나타날 때성장/변화 (Update) — pr..

리액트 생명주기 공부하는 동안 내 마음 ↓  그래도 해야지.. 어떡해.    1. 생명주기란 ?2. useEffect()?3. 언제 주로 필요로 하는가  3-1 데이터 받아올 때,   3-2 이벤트 핸들러 사용시,   3-3 타이머 함수 사용시,   🎠 생명주기(Lifecycle)란? 컴포넌트는 태어나고(mount), 살고(update), 사라져(unmount).React는 이걸 자동으로 관리해줘. 우리가 여기에 중간중간 개입할 수 있는 타이밍을 주는 거야.→ 바로 그 타이밍이 생명주기! 와닿지가 않는 생명주기란 것..  ▾아래에 쉽게 한번 정리 해보았습니다.▾ 리액트 공부하기 - 생명주기를 쉽게 이해해보자. (개인적인 견해를 덭붙여서)생명주기란 말.. 너무 와닿지 않아 너.. 생명 주기 때문에 어려움..

논리연산자 복습 해봅시다 - 🧚‍♀️이번엔 리액트에서 조건부 렌더링 시, 자주 쓰이는 것 위주로 리뷰 해보는 시간 입니다.1. && (AND 연산자)조건이 true일 때만 렌더링할 때 사용해.JSX 안에서 가장 많이 쓰이는 방식 중 하나야. {isLoggedIn && Welcome back!}→ isLoggedIn이 true일 때만 가 렌더링됨.  2. || (OR 연산자)첫 번째 값이 falsy이면 두 번째 값을 반환해.디폴트 값을 설정할 때 유용해. const name = userName || "Guest";→ userName이 없으면 "Guest"를 사용.  3. 삼항 연산자 condition ? expr1 : expr2가장 흔한 조건부 렌더링 방식 중 하나.if-else 대신 JSX 안에서 쓰기..

출력은 아래와 같이 되어야 하고, 정답 코드는 같이 옆에 첨부 되어 있습니다 ! 상태 끌어올리기 개념 공부하면서, 같은 맥락의 화면을 출력하는 예시 코드를 공부 했는데, 다시 보니 또 리셋.. 된 제 머리네요. 다시 공부하게 해주셔서 고맙습니다 ✨저는 출력을 담당하는 컴포넌트로 또 따로 분리가 되어 있었는데, 이 두 코드의 차이점도 마지막에 차근 차근 뜯어보며 공부해봅시다. ++ 다행히, 코드를 칠 수 있게 되었다 ! 물론 눈으로 씍 흐름을 훑은 뒤 였지만..다시 복습하며 아래에서 정리하면서, 오늘 저녁에 다시 한번 그냥 바로 쳐보기 도전하겠습니다. 말로 풀면 이런 흐름이다 ! 1. App 컴포넌트(부모 컴포넌트)처음에 const [name, setName] = useState('')👉 이름을 담을 상..

뭐든 기초가 제일 중요한 법.그걸 알면서도. . 인간은 같은 실수를 반복하지.아무튼 화살표 함수 다시 공부 시땅 ! 그래.. 간결하게 쓰는 거 좋은 거 알겠는데,눈에 익지 않아서 원.. 여러개 연습해보고 갑시다. 몇번 연습해보면 눈에 익을 겁니다const 함수명 = (인자) => {}일반 함수를, 화살표 함수로 바꾸세요. 🕊️[Quiz 1]function sayHi() { console.log("Hi!");} ↓↓↓↓const sayHi = () => { console.log("Hi!");};   🕊️[Quiz 2]function square(x) { return x * x;} ↓↓↓↓const square = (x) => { return x * x;};  🕊️[Quiz 3]function ..

리액트 .. 어렵네..  ㅎr..... React의 상태는 불변(immutable)해야 합니다.React의 상태를 잘 관리하기 위해서는 반드시 기억해야 할 것이 있습니다.바로, React의 상태는 불변해야 한다는 것입니다. 그 이유는 React가 컴포넌트의 상태가 변경될 때마다 렌더링을 다시 수행하고,이를 통해 새로운 가상 돔 트리를 구성하는 방식으로 동작하기 때문입니다.상태의 불변성을 유지할 경우 이전 상태와 새로운 상태 간의 차이를 명확하게 비교할 수 있게 됩니다.따라서 보다 효율적인 업데이트와 렌더링이 이루어집니다.반면 상태를 직접 변경하는 경우, 변경사항을 올바르게 감지하지 못할 수 있습니다. 이는 많은 버그의 원인이 되기도 합니다. 1. 상태를 변경할 때 그냥 변경하는 것이 아닌,1. 상태 함수..

역시 뭐든 기초를 탄탄하게 하고 봐야 합니다..자바스크립트에서 휘릭 넘겼던 "..." 전개 연산자.리액트 배열 상태 상태 다룰 때 자주 쓰인다고 🥺다시 복습 갑시다 - !배열에서 ... (전개 연산자) 뜻배열이나 객체의 내용물을 풀어서(펼쳐서) 넣는 거예요. ✅ 예시 1: 배열 복사const arr = [1, 2, 3];const copied = [...arr];console.log(copied); // [1, 2, 3]→ ...arr은 arr의 요소들을 하나씩 꺼내서 새 배열에 넣어요. 깊은 복사는 아니고 얕은 복사예요.  ✅ 예시 2: 배열 합치기const a = [1, 2];const b = [3, 4];const combined = [...a, ...b];console.log(combined);..

추상적인 이름부터 어려운 상태 끌어올리기..너무 어려워.. 리액트 중 가장 어려운 개념 같다.1. 상태 끌어올리기를 하는 이유?2. 예시 코드 🎯 한 줄 정리"다른 컴포넌트도 이 값을 알아야 해?"그럼 끌어올려!💭 주로 언제 상태 끌어올리기를 쓸까?✅ 1. 두 개 이상의 컴포넌트가 같은 상태를 써야 할 때예:하나는 입력 컴포넌트,다른 하나는 입력된 내용을 보여주는 컴포넌트.→ 이럴 땐 상태를 각자 관리하지 말고, 부모에서 한 번만 관리하게 해야 해. ✅ 2. 부모가 자식의 상태를 알아야 할 때예:자식이 어떤 버튼을 클릭했는지에 따라부모가 뭔가 바꿔야 하는 상황 (예: 모달 열기, 리스트 업데이트 등)→ 자식에서 상태를 만들지 말고, 부모로 끌어올려서 부모가 제어하게 해! ✅ 3. 형제(같은 부모를 가..

state를 겨우 이해했는데,props의 등장이네요 ! !  자꾸 들여다보면 이해가 되겠지 ? (사탄들의 학교에 루시퍼의 등장이란 ~)매 개념이 내게 루시퍼,,1. props를 비유로써 알아보자2. 코드 흐름3. 코드 예시4. 파라미터 라고 이해하면 편할까?5. 읽기 전용과 단방향의 의미6. 프롭스 전체 흐름7. props가 없을 때, 기본값을 넣고 싶을때 ! "defaultProps나 디스트럭처링"  사용props란 ? 비유로써 쉽게 알아보자. 비유: 엄마가 도시락을 싸서 아이에게 학교에 보내주는 것리액트 컴포넌트는 함수이자 **재료(데이터)**를 받아서 UI를 만들어주는 기계야. 이때 엄마가 싸준 도시락(재료)이 바로 props야!아이(자식 컴포넌트)는 도시락을 받고(=props를 받고) 그 안의 반..