프론트앤드16 [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) Props 점점 많은것을 배우게 되면서.. 기초의 중요성을 아주 뼈저리게 느끼는중이라.. React에서 중요한 props에대해 한번 배운것 복습하면서 정리해보려고한다.. Props란 -컴포넌트의 속성값을 의미하며, 즉 부모컴포넌트로 전달받은 데이터를 지니고 있는 객체{ }를 의미한다. -Props를 이용하면, 부모 컴포넌트에서 자식컴포넌트로 전달하고자 하는 어떤값이든 (문자, 숫자, 변수, 함수 등) 모두 전달이 가능하다. 예시를 들어보겠다 //Parent.js import React from "react"; import Child from "./Child"; const Parent = () => { const animal = "호랑이"; //호랑이라는 문자열을 변수에 담아서 관리하고있으며, //해당 변수를 이용해.. 2023. 1. 30. 이전 1 2 3 다음
