creamymood의 개발 공부 발자취 💭

1. 컨트롤 컴포넌트가 뭘까? 비유로써 알아보기2. 상위 개념과 하위 개념3. 어떨 때 주로 사용되는지, 대체 할 수 있는 useRef💡✨컨트롤 컴포넌트가 뭘까? 비유로써 알아보기🎬 1. 비제어 컴포넌트(Uncontrolled Component)     너는 지금 "입력창(input)" 역할이야.     💬 누군가 "이름을 입력해줘!" 라고 해.     그래서 네 마음대로 쓰기 시작해.     Jane이라고 쓰고, 이 내용은 너 혼자만 알고 있어.     React(관리자)는 몰라.     React는 ref 같은 걸로 나중에 몰래 엿봐야 해. 📦 React: "Jane이 뭘 썼는지 모르겠네… 나중에 확인해야겠다."🎬 2. 제어 컴포넌트(Controlled Component)     이제 다시 ..

1. HTML 구조나 디자인을 바꿀 수 없을까?2. 조건부 렌더링 확실히 이해할 예제3. 실습으로 이해 해보자    3-1 조건문(if문)으로 조건부 렌더링 실습   3-2 삼항연산자로 조건부 렌더링 실습 렌더링이 될 때, 내용이 새로 업데이트 되면 내용만 바뀌는건데.. 그렇다면 틀은 똑같지 않나 ?🐰HTML 구조나 디자인을 바꿀 수는 없을까 ?더보기디자인을 바꿀 땐, className 속성을 적용하면, css에서 적용할 수 있다. 그럴 때 사용하는 기술이 "조건부 렌더링" 이다 특정 조건이나 상태에 따라서 다른 컴포넌트나 요소를 렌더링 하는 것.보통 조건문이나 논리 연산자를 활용한다 ! 잠깐 궁금한 부분을 해결 한 뒤, 실습으로 개념을 이해해보자. 나의 고민.. 그냥 상태 함수 써서 다르게 보이면 되..

지난번에 class형 컴포넌트와 함수형 컴포넌트에 대해 종류가 무엇이고, 각 컴포넌트의 장단점에 대해 공부 했었다.✎🤍 그 중 간단히 공부했었던, 생명주기에 관련하여 오늘 조금 더 깊게 정리해보았어요 ! 🤍  🤍 1. 생명주기란 ? 2. 왜 필요한가?3. 클래스형과 함수형의 생명주기💡✨생명주기란? ▾ 아래 내용을 읽는다면, 한방에 이해 가능.▾ 리액트 공부하기 - 생명주기를 쉽게 이해해보자. (개인적인 견해를 덭붙여서)생명주기란 말.. 너무 와닿지 않아 너.. 생명 주기 때문에 어려움을 겪고 계신 여러분들,, 제 글을 보며 조금 도움이 되길 바랍니다...    그냥 생명주기라고 하지말고 관리타이밍 이라고 이creamymood.tistory.com  컴포넌트는 태어나고(mount), 살고(updat..

함수형은 그나마 재밌어 ~ 함수형은 그나마 재밌어 ~ 함수형은 그나마 재밌어 ~  ..... 1. 함수형 컴포넌트 생명주기와 메서드2. 생명주기 메서드 useEffect3. 의존성 배열이 여러개라면 ?  💡✨ 함수형 컴포넌트 생명주기와 메서드 클래스 컴포넌트의 생명주기 메소드는 3가지가 있었지만,함수형에서는 useEffect로 사용할 수 있다.  ▾ 아래 내용을 읽는다면, useEffect 한방에 이해 가능.▾ 리액트 공부하기 - 생명주기란? 왜 필요할까? 어디에 쓰일까?리액트 생명주기 공부하는 동안 내 마음 ↓  그래도 해야지.. 어떡해.    1. 생명주기란 ?2. useEffect()?3. 언제 주로 필요로 하는가  3-1 데이터 받아올 때,   3-2 이벤트 핸들러 사용시,   3-3 타crea..

클래스형 컴포넌트야 .. 우리 이제 그만 만나면 안될까 ..  응 안돼.. 기술 면접도 봐야하고, 예전 코드도 읽을 줄 알아야지 ..  💡✨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 ..