본문 바로가기

전체 글105

[React] 컴포넌트 재사용 1차 프로젝트를 하면서 비슷한레이아웃을 가진 컴포넌트를 어떻게 사용해야하는지 궁금했는데, 마침 배우게 되어서 정리를 해 보았다. 어려울 것 같았으나, 알고보니 되게 간단하게 구현 할 수 있었다. 이런것도 할 수 있다니... 아주 좋구만... 🌝 컴포넌트 분리는 대부분 관심사에 따라 분리를 하는데, 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는것 을 의미한다. 복잡한 컴포넌트 일수록 재사용이 어려워 가독성과 유지보수성이 떨어지기 때문에 컴포넌트를 따로 분리하여 관리하면 앞서말한 문제들을 야기시키지 않아 아주 유용할 것이다. 컴포넌트를 분리하는 기준 -> UI일부가 여러번 사용되거나, UI 일부가 자체적으로 복잡한 경우 분리 한번 이제 예를 들면서 배웠던 것을 정리해 보겠다. 1. 컴포넌트 분리.. 2023. 2. 19.
[1차 프로젝트] 멘토님께 받은 리뷰 정리( useState, 주석없애는 이유,조건부 렌더링 (&& 연산자), JSON.parse( )매서드) 위코드에서의 1차 프로젝트를 하며 멘토님께 받았던 리뷰를 간단하게 정리하고, 내가 뭐가 부족한지 알아보는 시간을 가져보았다. 🌝 코드...진짜 알면 알수록...어렵지만,, 또 재미있는...ㅠ ^ㅠ 1. useState setState 함수의 인자로는 1. 새로운 state가 될 값 2. 콜백함수 () => {} 두가지 유형의 인자를 전달할 수 있는데, 콜백함수를 인자로 전달한다면 콜백함수는 인자로 이전의 state값을 전달받고 함수에서 return 한 값이 새로운 state가 된다. 장점 - 이전 state 값을 명시적으로 기억할 필요가 없음 - 함수가 호출될 당시 최신의 state값이 인자로 전달되므로 비동기 상황에서 안정적 위와 같은 이유들로 인해 이전 state 값을 이용해서 새로운 state값을 .. 2023. 2. 18.
[Javascript] 조건문 바로 전에 parseInt( ) 으로 string-> num 변환도 했고, isNaN ( ) 으로 값이 숫자가 아닌지 맞는지도 해봤는데, 이걸로 이어서 조건문을 이용해 본 것을 정리해 볼 예정이다. (그전) 참고참고 https://hayley-0616.tistory.com/19 [Javascript] string->num , NaN 판별 Javascript 복습중 string->num으로 바꾸는 새로운 방법을 알게되었다! 바로 parseInt를 쓰는것!!!! parseInt( )를쓰면 string->num으로 변환시켜주는데 예를 들어 설명해 보겠다. 이렇게 prompt로 나이를 묻는 창 hayley-0616.tistory.com 조건문은 이런 구조로 구성되고 있다. if(condition){ // con.. 2023. 2. 5.
[Javascript] string->num , NaN 판별 Javascript 복습중 string->num으로 바꾸는 새로운 방법을 알게되었다! 바로 parseInt를 쓰는것!!!! parseInt( )를쓰면 string->num으로 변환시켜주는데 예를 들어 설명해 보겠다. 이렇게 prompt로 나이를 묻는 창을 생성했다고 해보자 여기에 숫자값을 넣는다면 숫자로 나올 줄 알았으나.. 29를 입력했으나, string으로 나온 것을 볼 수 있었다. 이제 이 string 으로 나오는 것을 num으로 변환을 해 줄것인데, 이때 사용하는게 위에서 언급한 parseInt( ) 이다. 이렇게 사용해보자! 29라는 숫자를 아래처럼 둘다 ""로 감싸주었을때, pareseInt를 이용한 데이터의 타입은?! console.log(typeof "29" , typeof parseInt.. 2023. 2. 5.
React) useEffect 앞에 Side Effect글과 이어서 useEffect에 대해정리해보겠다. https://hayley-0616.tistory.com/17 이제 useEffect 차례다.. 학습목표는 이것이었다.. - React 에서 Side Effect의 올바른 발생 시점 알기 - useEffect의 사용법 알기 - 조건부로 Side Effect 발생시키기 - Rendering & Effect Cycle 알기 - Clean Up Effect 알기 과연 나는 다 알았을 것인가.. 🙈😑🙈 React 에서 Side Effect의 올바른 발생 시점은 - 렌더링을 Blocking 하지 않기 위해서 렌더링이 모두 다 완료되고 난 후 실행할 수 있어야 한다. - 매 렌더링마다 실행되는 것이 아니라 내가 원할 때만 조건부로 실행할 수.. 2023. 2. 2.
React) Side Effect React의 꼬-ㅊ 이라는 useEffect를 배웠다.. 일단...이론은 알겠다.. 알겠는데... 흠.. 일단 내가 배운대로 정리를 해보겠다. 먼저 side Effect다. 일단 학습목표는.. React에서 UI Rendering과 Side Effect의 차이를 구분하여 설명할 수 있다. useEffect hook을 활용해 다양한 Side Effect를 일으킬 수 있다. useEffect hook을 활용해 원하는 타이밍에 Side Effect를 일으킬 수 있으며, 이 과정에서 일어나는 컴포넌트 렌더링 과정을 설명할 수 있다. Side Effect 란? : 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과를 말한다. : 함수의 주된 목적은 Input을 받아서 output을 산출하는 것 이므로 (inp.. 2023. 1. 31.

티스토리툴바