lyuna's story

첫째로, 렌더링 도중에 상태를 업데이트 할 때는 조건부로 업데이트를 수행해야 한다. 이때 조건은 이전상태 (prevCount)와 새로운 상태 (count)가 다른지를 확인하는 것이다. 이렇게 하면 불필요한 렌더링을 방지할 수 있다. 만약 조건 없이 상태를 업데이트 한다면 렌더링이 무한반복되어 앱이 깨질 수 있다. 둘째, 상태를 업데이트 할 때는 상태를 업데이트 하는 함수인 setPrevCount를 호출해야 한다, 이 함수는 이전 상태(precCount)를 새로운 상태 (count)로 업데이트 한다. 이를 통해 리액트는 상태 변경을 추적하고 필요한 경우에만 컴포넌트를 다시 렌더링 한다. 셋째, 렌더링 도중에는 현재 렌더링 중인 컴포넌트의 상태만을 업데이트 해야 한다. 다른 컴포넌트의 상태를 업데이트하려고..

객체 및 배열 state 업데이트 state에는 객체와 배열도 넣을 수 있다. 리액트에서 state는 읽기 전용으로 간주되기 때문에 기존 객체를 바꾸지 않고 교체를 해야한다. state에 form객체가 있는 경우에는 바꾸지마라. 대신 새로운 객체를 생성하여 전체 객채를 교체하면 된다.  초기 state 다시 생성하지 않기리액트는 초기 state를 한번 저장하고 다음 렌더링부터는 이를 무시한다.createInitialTodos()의 결과는 초기 렌더링에만 사용되지만, 여전히 모든 렌더링에서 이 함수를 호출한다. 이는 큰 배열을 생성하거나 복잡한 계산을 수행하는 경우 낭비가 될 수 있다. 이 문제를 해결하려면 useState에 초기화 함수로 전달하면 된다. 함수를 호출한 결과인 createInitialTod..

Usage사용법컴포넌트의 최상위 레벨에서 useState를 호출하여 하나 이상의 state 변수를 선언한다.배열 구조 분해를 사용하여 [something, setSomething] 과 같은 state 변수의 이름을 지정해야 한다.useState는 두 개의 항목이 있는 배열을 반환한다.이 state 변수의 현재 state로 처음에 제공한 초기 state로 설정된다.상호작용에 반응하여 다른 값을 변경할 수 있는 set함수 이다.화면의 내용을 업데이트 하려면 이 state로 set 함수를 호출한다.React는 다음 state를 저장하고 새로운 값으로 컴포넌트를 다시 렌더링한 후 UI를 업데이트한다. set 함수를 호출해도 이미 실행중인 코드의 현재 state는 변경되지 않는다.(예시) set함수는 다음 렌더링..

useState(initialState)초기에 state를 설정할 값으로 모든 데이터 타입이 허용되고 초기 렌더링 이후에는 무시된다.함수를 initialState로 전달하면 이를 초기화 함수로 취급한다. 이 함수는 반드시 어떠한 값을 반환해야 한다.React는 컴포넌트를 초기화할 때 초기화 함수를 호출하고, 그 반환값을 초기 state로 저장한다. -return (반환하기)useState는 두 개의 값을 가진 배열을 반환한다. useState는 훅이므로 컴포넌트의 최상위 레벨이나 직접 만든 훅에서만 호출할 수 있다. 반복문이나 조건문 안에서는 호출할 수 없다. 필요하다면 새 컴포넌트를 추출하고 state를 그 안으로 옮기면 된다.Strict Mode 에서 리액트는 의도치 않은 상황을 위해 초기화 함수를 ..

팀원들과 어쩌다가 보니 스터디를 같이 하게 되어 튜터님이 알려주신 깃허브로 스터디 내용을 공유하기로 하였다.그래서 마크다운 사용법에 대해 간단하게 익혀보려고 한다! 마크다운의 각 문법은 HTML로 변환되어 CSS와 함께 출력되기 때문에화면에 표시되는 모양이 사용하는 스타일 구성에 따라 달라진다.그래서 눈에 보이는 대로가 아닌 문법의 의미에 맞게 사용해야 하므로 같이 공부해 보자.! 문법, , 등을 대신하여#, ##, ### 이렇게 표기하고 하나의 마크다운 파일에서는 하나의 (대제목)만 사용해야 한다 또한 과 는 제목 1=======제목 2------이렇게도 표기한다고 한다. 강조(기울임), (두꺼움), (취소선) 등의 강조를 표현하는 마크다운 표현법은기울임 >> * 내용* 혹은 _내용_ 를 사용하면 된..

to do list를 만드는 과제중최종 단계에서뭐지 이건,, map이 엉뚱한데서 적용되고 있는 것 같은데튜터님한테 바아로 찾아갔다 해결방법은 너무 간단했음저 workingbox를 감싸고 있는 div 자체를 map해야하는데div안의 내용만 map돌리고 있었음 ㅜㅜ저 맨 윗줄 바로 아래에 있던 div를 return 아랫줄로 옮기고 Content에 부여했던 key값을 최상위의 div에게 부여해줬다 그러면이렇게 짜잔 ! 이제 css만 좀 더 건들이면 완성ㅇ~~그건 내일 놀고 생각해보자 공휴일이니까!!

터미널에서 vi ~/.zshrc를 입력하면이렇게 zsh 편집창이 뜨는데 마지막 줄에  prompt_context() {# Custom (Random emoji)  emojis=(“🐶” “🍒” “💙” “💗” “🦋” “🍄” “🌸” “🥔” “🍭” “💌” “💞”)  RAND_EMOJI_N=$(( $RANDOM % ${#emojis[@]} + 1))  prompt_segment black default "Hyunah ${emojis[$RAND_EMOJI_N]} "} 이 코드만 삽입해주면 된다 이모티콘은 본인이 원하는 것으로 추가하기 그럼 터미널 창을 열 때 마다 다른 이모티콘이 뜬다! 이걸 왜 하냐고 물으신다면..기분이 조크등요 ㅎㅎ

if (inputPassword === commentToDelete.password) { const filteredComments = comments.filter((comment) => comment.time !== commentToDelete.time); localStorage.setItem("comments", JSON.stringify(filteredComments)); loadComments(); alert("댓글이 삭제되었습니다."); } else { alert("비밀번호가 일치하지 않습니다."); } 댓글 삭제기능을 구현하는데 time 속성을 사용하는 이유에 대해 궁금해졌다.인덱스가 있는데 왜 time 속성으로 filter하는걸까? time 속성을 사용하는 이유는 각 댓글이 유일한 시간을 가지..

팀프로젝트를 하는 와중에 로컬스토리지를 사용하라는 조건이 있어서 사용해보기 전에 정보를 검색해보았다. 로컬스토리지는 웹 브라우저에 데이터를 저장하는데 사용되는데이 데이터는 사용자가 브라우저를 닫아도 계속해서 유지되며,도메인 레벨에서 제한된 용량 내에서 저장된다. 로컬스토리지에 데이터 저장하는 법localStorage.setItem('key', 'value'); 데이터 불러오기var value = localStorage.getItem('key'); console.log(value); 데이터 삭제하기localStorage.removeItem('key'); 모든 데이터 삭제하기localStorage.clear(); 로컬스토리지에는 문자열만 저장할 수 있다.만약 객체를 저장하고 싶다면 객체를 JSON 문자열로 ..

더 큰 z-index값을 가진 요소가 작은 값의 요소 위를 덮는다 만약 z-index: 0; 값을 가진 박스가 있고,z-index: 3;값을 가진 박스가 겹쳐있다면z-index :3;값을 가진 박스가 z-index: 0;값을 가진 박스 위를 덮는다! 참고자료https://developer.mozilla.org/ko/docs/Web/CSS/z-index