728x90 반응형 React30 [React] clean up function component가 destroy 될때도 코드를 실행시킬 수 있는데, 이런걸 clean up function이라고 한다. component가 destroy할때 함수를 실행시키면서 뭔가 할 수 있도록 해준다. 이것을 통해 component가 언제 create 됐는지 언제 destroy 됐는지 알 수 있다. show 버튼을 누르면 hide로 버튼이 바뀌면서 Hello가 뜨고 다시 이 hide버튼을 누르면 show버튼만 남게 코드를 구현해볼 것이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function Hello(){ useEffect(()=>{ console.log("created "); return ()=> console.log("destroyed");.. 2022. 5. 2. [React] props props Props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다. Btn으로부터 저장받는 인자를 props라고 한다. Btn({text:"Save Changes"})와 같은 표현이다. 이 사진과 같이 리액트는 모든 props들을 오브젝트 안에 집어넣고 오브젝트는 컴포넌트의 첫번째 인자로 주어진다. props는 첫번째 유일한 인자이다! 즉, props는 우리가 넣은 모든 것이 오브젝트가 된다. props 객체 에 들어가는 property를 하나 더 추가해보려한다. big라는 property를 두어 big가 true면 폰트사이즈를 18로, big가 false이면 폰트사이즈를 16으로 두려한다. 이때 중요한건 true,false도 bool타입이라 js문법이 들어가기 때문에 중.. 2022. 4. 8. [React] 단위 변환 계산기 만들기 단위를 변환해주는 컴포넌트를 만든 후 그것을 App이라는 최종 컴포넌트에 담는 분할정복 방식을 사용해 구현해볼거다! 단위 변환은 두가지를 선택지가 있는데 분을 시간으로/ km를 mile로 변환하는 것을 선택하게끔 해볼 것이다. select 와 onChange 보통 선택지를 고르는 UI를 구현하려 할때 html의 앨리먼트를 이용해볼 수 있다. 이제 여기서 select의 change Event 를 listen해 볼건데 onChange 속성을 이용해 볼거다. ++) onChange 속성은 속성으로 value를 가지는 엘리먼트에 다 갖다 붙일 수 있다! w3schools 문서에 따르면 "The onchange attribute fires the moment when the value of the element .. 2022. 4. 8. [React] input과 state label과 htmlFor 태그는 말그대로 요소의 라벨을 정의할 때 사용하는데 input 태그의 id값을 연결해주기 위해 for을 사용한다. 그래서 이런식으로 써주는데 이렇게 쓰면 jsx문법에 맞지 않는다. 왜냐면 이미 for는 js 문법이기 때문에 htmlFor이라고 써줘야 한다. 마치 class를 className이라고 써주는 것처럼 사용자가 input에 쓰고 있는 value state통해 가져오기 아무튼 이렇게 input을 잘 썼는데 사용자가 input 에 쓰는 value를 어떻게 리액트를 통해 제어할 수 있을까? 바로 useState를 통해 가져올 수 있다! value에 현재 minutes를 넣어준다. 이제 유저가 다른 값을 입력할 때마다 이 value를 업데이트 시켜볼 것이다. 이때 사용하는게 .. 2022. 4. 3. 이전 1 2 3 4 5 6 ··· 8 다음 728x90 반응형
