목록프로그래밍/React.js (3)
느릿느릿 프로그래밍
* 이 내용은 React의 공식 문서를 보고 정리한 내용입니다. 자세한 내용은 여기를 확인하세요. React 16.8 버전에서 새롭게 추가된 Hook을 보았다. 함수형 컴포넌트에서도 state, 생명주기와 같은 기능을 사용할 수 있다는 내용인데.. 이미 Class형 컴포넌트에서 가능한 일을 왜 함수형 컴포넌트에서도 가능하게 만들었을까?하는 궁금증이 생겼다. 그래서 공식 문서를 보고 간단히 내용을 정리해보았다. 왜 Hook이 추가되었는가? | 기존 React에서는 컴포넌트 사이에서 상태와 관련된 로직 재사용이 어렵다. 그래서 우리는 context(provides, consumers), render props, HOC와 같은 패턴을 사용해왔다. 그러나 이러한 패턴들을 사용하면서 wrapper hell을 겪을..
개발한 웹페이지를 빌드하고 보니 브라우저 tab의 favicon과 name이 리액트더라.. 그래서 다음 설정을 통해 favicon 설정하고 이름을 바꾸었다. | public 폴더 수정하기 create-react-app을 통해 생성한 react 프로젝트를 보면 위와 같이 node_modules, public, src 폴더가 있다. 이 중 public 폴더의 favicon과 index.html을 수정하면 된다. favicon.ico 파일을 본인이 넣고자하는 아이콘 image로 대체하면 된다. 웹페이지의 title은 index.html의 태그를 수정하면 바뀐 이름으로 적용된다. | React Helmet 사용하기 https://github.com/nfl/react-helmet nfl/react-helmet A..
Web을 개발하다보면 폴더와 파일의 depth가 깊어지는 경우가 있다. 이런 경우 파일 import시에 ../../components/sign/logout 식으로 ../가 많아져서 복잡하고 번거로워진다. 그러나 절대경로를 설정하면 components/sign/logout 으로 간단히 작성할 수 있다는 사실! 나는 src 폴더를 기준으로 절대경로를 설정하였다. 방법은 아래와 같다. | Linux, Mac 에서 설정하기 프로젝트의 package.json 로 이동 후, scripts의 start, build 부분을 다음과 같이 수정한다. "start": "NODE_PATH=src/ react-scripts start", "build": "NODE_PATH=src/ react-scripts build", | W..