React

리액트에서 컴포넌트는 함수형 컴포넌트와, 클래스형 컴포넌트로 나눌 수 있다. 클래스형 컴포넌트에서는 state 기능, 라이프사이클 API 기능을 사용할 수 있습니다. 함수형에서는 state와 라이프사이클 AP를 사용할 수 없습니다. 하지만 Hooks라는 기능이 도입되면서 해결되었습니다. ● 함수형 컴포넌트, props, propTypes import "./App.css"; function App() { return 안녕하세요? 함수형 컴포넌트 입니다.; } export default App; props는 아래와 같이 적어줍니다. App.js import MyComponent from "./MyComponent"; function App() { return ( 안녕하세요? 함수형 컴포넌트 입니다. ); }..

● 리액트란 왜 탄생했을까? 옛 시절,, 넷스케이프라는 브라우저에서 다양한 브라우저가 생긴 뒤 큰 혼돈을 겪고 ECMAscript가 이 혼돈을 잠재운 뒤, 지금의 자바스크립트가 되었습니다. 자바스크립트는 오로지 웹브라우저에서 간단한 연산과 시작적인 효과만 주는 언어에 불과했지만 현재는 웹 어플리케이션에서 가장 핵심적인 역할을 하게 되었습니다. 이제는 자바스크립트 만으로도 규모가 큰 어플리케이션 개발이 가능하게 된 것이죠. 하지만 오로지 '자바스크립트' 만으로 대규모 어플리케이션을 개발할 수 있을까요? 그건 좀 어려워 보입니다. 그래서 생긴 것이 다양한 프레임워크인데요. Angular, Backbone.js, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, Pu..

리액트로 만들엇읍니다.. 리액트로 계속 뚝딱거리니 component와 props에 대해서 마니 익히게 된 것 같읍니다.. 하지만 문제가 있으니.. redux 친구는 아직 친해지지 못햇읍니다.. redux.. prop 보관함.. 당신과 친해지고 싶읍니다.. 서버와 연결하는 fetch 와 async 친구들.. axios친구.. 를 접해볼 수 있었읍니다. 아마 서버쪽과 연결하는 부분은 차차 또 스스로 공부하고 배워가봐야갯읍니다.

● 리액트가 리렌더링 되는 경우 이전에 리액트로 쇼핑몰 사이트를 만들다가 localStorage에서 데이터를 가져와 값을 변경하고 싶었는데, 값은 수정이 되는데 HTML 렌더링이 안돼서 .. 리액트가 리렌더링이 되는 경우를 분석해보고자 포스팅한다. 분명 나는 useState 변수가 변경되면 리렌더링이 된다고 배웠는데 자꾸 안됐다 ㅜㅠ 이포스팅을 적고 차후에 수정해볼 생각이다. 내부상태(state) 변경 시 부모에게 전달받은 값(props) 변경시 중앙 상태값(Context value 혹은 redux store) 변경시 부모 컴포넌트가 리렌더링 되는 경우 부모 컴포넌트가 리렌더링(state변경 등등)된다면, 부모안에 있는 자식 컴포넌트들도 모두 리렌더링 되기 때문에 memo, useEffect 들을 사용하..

react로 쇼핑몰페이지를 만들었었는데 제품의 개수를 더하는 버튼을 누를 때마다, 개수가 올라가게 만들게 하고 싶었다. 근데 자꾸 렌더링이 안되고.. 뭔가 문제가 있었었는데 오늘 해결점을 알았다 *^^* 먼저 const 로 지정을 해주면 안된다. 값이 변경되면, counter++ 이든, ++counter을 해주든 값이 변경이 안됨. 왜냐면 coutner = counter + 1; 이런식으로 값이 재할당되는 것이기 때문에 const가 아닌 let 으로 변수타입을 바꿔하면 적용이 잘되는 걸 볼 수 있다. 또한 버튼을 누르면 counter++ 보다 ++counter으로 적은 코드가 훨씬 빠르게 적용되는 걸 알 수 있다. 이건 왜인지 모르겠다. . 나중에 계산하는 값이라고 판단하고 연산 자체의 순서를 나중으로 ..

HTML에서도 Bootstrap을 사용할 수 있었듯이, 리액트에서도 사용할 수 있다. 아래 링크로 가서, 원하는 리액트 프로젝트 파일을 열고 https://react-bootstrap.netlify.app/getting-started/introduction React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 터미널에 아래와 같은 코드를 입력해주면 된다. npm install react-bootstrap bootstrap 1) 다음으로는 App.js 파일에 아래 코드를 임포트해서 넣거나, import 'bootstrap/dist/css/bootstrap.min.css'; 2) ind..