1년차 블로그

React 내용은 아니긴한데 그냥 html 카테고리가 없어서 여기다가 적어볼라고 합니다.보통 이미지에다가 설명을 붙혀주기 위해서 툴팁을 적잖아요?  이 태그에 적게 될게 될텐데 거기에 title만 붙히면 툴팁이 나옵니다. Community는 import 한걸 넣었고 title을 저런식으로 작성하면 요런식으로 나옵니당캡쳐모드라서 커서가 안나오긴했는데, 현재 마우스는 3번째 이미지에 올라간 상태입니다tooltip 꾸미는건 다른 블로그 보시거나 나중에 다시 쓰겠습니다.이 글은 간단한 tooltip 만들기니까요

useState와 비슷하게 생긴 useEffect는 화면에 Component가 렌더링 될 때마다 특정 코드를 실행하게 하는 React Hook이다. 그러므로 화면에 무조건 바로 보여줘야 되는 코드보다는 조금 늦어도 되는(?) 코드에 주로 사용한다.ㅁuseEffect는 component가 mount(화면에 나올때), unmount(화면에서 사라질때), update(수정됐을때)특정 작업을 처리할 수 있다.1. ComponentDidMount : 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행2. ComponentDidUpdate : 리렌더링을 완료 후. 즉 render()가 업데이트 될 때마다 실행3. ComponentWillUnMount : 컴포넌트를 DOM에서 제거할때 실행useEffect( funct..

React나 Vue 등등을 사용할때는 Router가 필연적으로 사용된다.Router란 SPA에서 페이지 간 이동을 가능하게 해주는 라이브러리 이다.https://east-hyun.tistory.com/37 (SPA가 뭔지 보려면) Single Page Application" data-og-description="원래 html만을 사용해서 웹 페이지를 만든다면 가정 합시다.시작은 index.html에서 만약 a href를 사용한 링크를 누른다면 다른 페이지로 이동할겁니다.이러한 페이지들은 어쩌구.html , 저쩌구.html 등" data-og-host="east-hyun.tistory.com" data-og-source-url="https://east-hyun.tistory.com/37" data-og-u..

원래 html만을 사용해서 웹 페이지를 만든다면 가정 합시다.시작은 index.html에서 만약 a href를 사용한 링크를 누른다면 다른 페이지로 이동할겁니다.이러한 페이지들은 어쩌구.html , 저쩌구.html 등등으로 웹페이지를 갈아엎고 어쩌구 or 저쩌구 .html로 바뀌도록 해왔습니다.하지만 React 혹은 Vue를 사용한다면 이렇게 진행 되지 않는다.Why -> React와 Vue는 SPA ( Single Page Application )로 만들어지기 떄문이다. Single Page Application이란 index.html이라는 화면을 사용자에게 보여주고다른 페이지로 이동할때, 페이지 전체가 바뀌는것이 아닌 일부분만 바뀌는 것을 뜻한다.쉽게 말해, 단일 페이지로 구현한 사이트를 말하는데만약..

js 파일안에 function App안에 작업을 해서 html을 만든다. ( JSX )우리는 예시로 Modal이라는 컴포넌트를 만들어서 App안에 넣을수 있다.그런데 우리는 컴포넌트를 만들때 하나의 내용만을 위해서 만들지 않는다. (하나만 할거면 하드코딩하지?)보통 컴포넌트는 3가지 상황에서 많이 사용된다.1. 반복적인 html을 축약하고 싶을때2.페이지를 전환할때 큰 페이지를 컴포넌트로 사용하면 유용3.자주 변경되는것들을 컴포넌트화 하면 편함그래서 App function에서 만든 State를 Modal function에 사용한다면 좋겠지만 바로 사용할수 없다.왜냐하면 당연하게도 Function App에서 만든 변수나 State는 바깥에서 사용할 수 없기 때문이다.Props 등장여기서 props가 필요하..