300x250 리액트5 오류 해결 - Warning: Can't perform a React state update on an unmounted component. 이번 ha2 시험에서 다음과 같은 오류들을 만났다. 섹션투를 두번을 들었지만 그때도 지금도 해결하지 못하다가 시험중에 계속된 구글링으로 결국 찾아냈다. Warning: An update to App inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { 블라블라블라~~~ Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.. 2021. 7. 19. React 노마드코더 기초강의 무비앱 만들기 완료 리액트가 너무 부족한 거 같아 찾아보다가 무료 강의가 있어해 봤는데 좋은 강의 같습니다! ReactJS로 영화 웹 서비스 만들기 https://github.com/dydwns2441/movie-app-2021 dydwns2441/movie-app-2021 react JS Fundamentals COurse (2021 update!) pratice nomadcoder - dydwns2441/movie-app-2021 github.com 2021. 5. 23. react 컴포넌트와 props로 데이터 보내기 이번엔 props에 대해 포스팅하려고 합니다. 리액트에 장점 중 하나는 컴포넌트형으로 작은 단위로 나눌 수 있다는 것입니다. 부모 컴포넌트에 있는 데이터들을 props를 통해 자식컴퍼넌트에서 사용할 수 있습니다. 위의 사진에서 보면 movie.js 컴포넌트안에 3번째 줄엔 props라고 써져있는것을 볼 수 있습니다. 그렇다면 부모 컴퍼넌트의 어떤 자료를 사용한 것일까요/ 6번 줄에 {props.movie.title} 과 7번 줄에 {props.movie.year} 이 부모 컴포넌트에서 가져온 자료, props라고 할 수 있습니다. 사용법은 위에와 같습니다. 왜 {props.movie.year}처럼 사용했을까요? 밑에 App.js를 보면 22번째 줄을 보면 movie라는 속성에 movie라는 속성을 만들어.. 2021. 5. 12. react 리액트 반복문 만들기 map 이번 포스팅은 리액트에서 반복문을 만드는 방법에 대해 알아보겠습니다. 먼저 App.js에 만든 movies라는 변수의 형태입니다. 총 4개의 객체가 있는 배열입니다. 두번째는 renderMovies라는 변수를 선언하는데 movies라는 배열을 반복문을 돌려 같은 함수를 적용시킵니다. 밑에 보시면 movie라는 변수(24번 줄)를 선언하였는데 여기서 movie는 배열을 순서대로 도는 변수라고 생각하시면 될거같습니다. 인덱스로 나타내면 -> movies[0], movies[1], movies[2], movies[3] 이런 식으로 반복이 될겁니다. 여기서 movie는 movies[0], movies[1], movies[2], movies[3] 이거라고 보시면 됩니다. 배열안의 객체를 돌며 title과 id, .. 2021. 5. 10. react 리액트 조건렌더링 이번 포스팅은 react에서 조건렌더링 하는 방법에 대해 알아보겠습니다. useState를 사용해서 저 toggle이란 버튼을 누르면 false => true로 true=> false 바뀌게 하는겁니다. 1) 8-10 줄을 보시면 renderCondition이라는 변수를 만들고 그안에 컨디션이 true면 true를 보여주고 아니면 false를 보여준다는 삼항연산자를 사용하여 할당하였습니다. 2)이 변수를 15번 줄에 {} 중괄호를 사용해서 넣어줬구요. 3)그밑에 버튼을 하나 만들었습니다. onClick으로 toggle이라는 함수를 넣어줬습니다. 4)toggle이라는 함수는 condition이라는 변수가 반대가 될수있는 setCondition함수를 가지고 있습니다. 5) 5번줄을 보시면 useState의 .. 2021. 5. 8. 이전 1 다음 반응형
