creamymood의 개발 공부 발자취 💭

논리연산자 복습 해봅시다 - 🧚‍♀️이번엔 리액트에서 조건부 렌더링 시, 자주 쓰이는 것 위주로 리뷰 해보는 시간 입니다.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. 상태 함수..