전체 글 67

230619) yarn creact react-app 실행 시 오류 발생

현재 이전 터미널 기록이 조회되지 않아 오류명을 그대로 긁어올 수는 없는 상황이지만, yarn create react-app 을 실행하면 지속적으로 에러가 발생하는 상황이었다. unexpected error. please report it as a bug: error: spawn unknown errno: -4094 등의 에러였다. 검색해 보니 거의 동일한 오류를 겪은 사람이 없고, 비슷한 경우의 해결방안을 찾아도 해결이 되지 않아서 정말 답답했는데 아래 블로그를 통해 백신의 문제일 가능성일 수도 있음을 깨달았다 https://young-taek.tistory.com/83 Antiviurse 오류해결 어느 순간, React 프로젝트를 만들려고 했는데, 아래와 같은 에러가 발생했다. 지인들한테 물어봐도 모..

TIL 2023.06.19

230615) React에서 state를 변경했음에도 불구하고 렌더링이 제대로 일어나지 않는 현상

To do List를 만드는 과정에서 완료, 취소 버튼을 누르면 각각 Working에 있던 것은 Done으로, Done에 있던 것은 Working으로 향하는 기능을 구현해야 했다. 그런데 state를 활용해 변형을 시켜보아도 랜더링이 제대로 되지 않는지, console.log에는 제대로 된 값이 직혀 나오지만 화면에 변화가 없었다. 그리고 input에 값을 입력하면 그제서야 바뀐 값에 맞는 위치로 들어가는 현상이 보이기도 했다. 결론적으로 말하자면, 이는 JS 고유의 불변성과 관련 있는 것으로 state를 변경하였으나 메모리의 주소값은 변경되지 않은 것으로 인지해 렌더링이 일어나지 않았던 것이었던 듯하다. 따라서 기존 value 값을 변경한 뒤, 기존에 있던 객체를 새로운 객체로 복사해 주고, 새로운 객..

TIL 2023.06.15

230614) Props Drilling 이란?

Props란? Props는 부모컴포넌트에서 자식컴포넌트로 값을 전달해 줄 때 사용된다 예를 들자면, 할아버지의 이름을 엄마에게 전달해 주기 위해서는 아래와 같은 코드가 작성된다. function Grandpa() { const name = "할아버지"; return ; } function Mother(props) { return 나는 {props.fatherName}의 자식입니다 ; } 여기서 Mother(props)에 있는 props는 p나 father mother f m 등으로 적어도 return 문과 동일하게 맞춰 준다면 잘 해석되긴 하지만, props는 props임을 보여 주는 것이 여러모로 좋으니 props로 통일해서 적는 것이 좋다! Props Drilling이란? Props Drilling이..

TIL 2023.06.14

230613) React 부모자식 컴포넌트와 JSX의 문법

React 문법 내에서 return을 할 때 한 줄일 때는 소괄호가 따로 필요 없지만, 한 줄을 초과할 경우 소괄호가 필요하다 그리고 JSX 식에는 부모요소가 한 가지만 있어야 하고, retrun 문의 최상단에는 태그가 하나만 존재해야 하기 때문에 return을 여러 줄 해야 할 경우 하나의 태그로 해당 줄을 감싸 줘야 한다! 참고로 빈 태그도 사용 가능하며, 브라우저에서는 빈 태그는 해석하지 않기 때문에 빈 태그 내부의 내용만 보이게 된다! function () { return ( 안녕하세요 저는 유이입니다! 즐거운 하루 보내세요! 안녕하세요 저는 유이입니다! 즐거운 하루 보내세요! 안녕하세요 저는 유이입니다! 즐거운 하루 보내세요! ) } return 뒤에 ()을 붙이고, 태그로 감싸 준 모습 fun..

TIL 2023.06.13