Enjoy Programming

회사 프로젝트 중 필자가 게시판을 전담해서 맡아서 완료했는데 아직 미완성인 부분이 임시저장 기능과 글 수정 기능이었다. 그동안 다른 파트 회원가입 마페이지 운임제 조회 등등 기능을 만드느라 뒤로 미뤄왔는데 이제 곧 런칭이라 급하게 수정기능을 만들었다. 기존에 고민이었던 부분은 수정페이지를 url을 하나 더 만들어서 하느냐 아니면 해당 페이지에서 컴포넌트 전환으로 만드느냐를 고민했는데 게시판이 많다보니 각 게시판마다 수정페이지를 만드는 것은 router가 지저분해 보여서 그냥 boolean state하나로 수정 버튼 클릭시 기존 board write를 재활용해서 보여주는 것으로 대체했다. 그리고서 board detail에서 받은 postdata와 수정 취소 setStateAction을 props으로 전달해..

드디어 다음 포스팅을 한다..;; 이번 포스팅은 저번에 typescript를 사용한 react의 state에 대해 알아봤다면. 이번에는 props를 전달해보자. 이전에 부모컴포넌트에서 바로 카운터state를 prop으로 전달하고 Number 컴포넌트에서 전달받아 이를 출력하는 코드를 짜보면 먼저 오른쪽이 기존 부모컴포넌트이다. 자식 function 컴포넌트를 import해주고 count이름으로 counter props를 전달해준다. 이를 받은 자식 Number컴포넌트는 count를 랜더링 해주는데 이때 역시 interface로 props의 타입을 정해준다. prop-types에서 정해주는것처럼 그리고서 Number: React.FunctionComponent 로 명명해서 이 컴포넌트가 react의 fu..

앞서 글로벌 css작성도 했고 약간의 헤더 수정도 진행했다. 이제 header가 어떤 route에 있는지 확인 하는 방법을 강구해보자. 무슨말이냐~ 그냥 네비게이션에서 마우스 커서가 올라가면 어떤 곳에 올라가있고 어떤 곳을 클릭하게 될지 그냥 보여주는거다 이런식으로~ 아래쪽에 줄 것이기 때문에 border-bottom을 5px solid로 주고~ 색상을 주는데 li의 stylecomponent인 Item에 current={true}로 flag를 설정해주고 border-bottom의 색상값을 주는 곳에 함수를 작성해주는데 props.current가 true이면 지정한 색을주고 아니면 transparent로 투명하게 해준다 그리고 이를 하기 위해 react-router-dom에서 withRouter를 imp..

react에서 컴포넌트에 prop을 보내는 것 까지는 해봤는데 이게 부모 컴포넌트로부터 전달 받은 prop이 내가 예상한 prop인지 확인할 수 있어야 한다. 항상 보이지 않는 에러를 방지하기 위해서는 꼼꼼한 체크가 필수 이다. 이제 체크하는 방법을 알아보자. 이전 포스팅 코드를 그대로 쓰면서 체크해 보겠다. 먼저 list에 객체들에 각각 rating을 추가하자. rating은 모든 것을 평가한다. rating: 5.1 이런식으로 임의의 숫자를 추가한다 그리고 prop-types를 설치해준다. prop-types 라이브러리는 내가 전달 받은 props가 내가 원하는 props인지 확인 해주는 라이브러리이다. 설치가 끝났으면 import PropTypes from "prop-types"; 임포트 해주고 F..

이번에는 동일 파일 안에서 작업을 해보자 이렇게 동일 파일 안에서 한 컴포넌트에 다른 컴포넌트를 넣어서도 사용 가능하다 jsx에서는 component에 정보를 보낼 수 있다. react는 기본적으로 재사용 가능한 component를 만들 수 있다. 반복적으로 사용가능하다는 말이다. 이제 jsx문법을 간단히 보며 시작해보자 props(propertys)와 함께~ 먼저 무비 컴포넌트를 만들어주고 I love thor라고 텍스트를 지정해줬다. 메인 컴포넌트인 App에 라고 입력해주면~ 변화는 없다. 여기서 name은 html에서 class=~ id=~이런 속성이다 name 속성~ 자 변화를 시켜보자 현재 movie컴포넌트에 parasite라고 value로 prop name을 지정해줬다. name이 아니어도 되..