본문 바로가기

LearningJavaScript/React

[navbar] 관련 참고 stackoverflow.com/questions/38038521/reactjs-onclick-setstate-to-different-element ReactJS onClick setState to different element I am new to react, and I am having a little issue. Maybe somebody can help me out. So the issue is that I am unable to triger the element I want with onCLick function. Now I am trying to remove the stackoverflow.com 더보기
[React] 왜 Ajax요청은 componentDidMount에서 해야할까? 리액트 공식문서에서 보면 더보기
[React] 컴포넌트 렌더링할 때 왜 index 대신 고유 key를 쓸까? 사용하려는 데이터가 배열로 있는 경우, map을 이용해 각 데이터를 렌더 시키는데, 이 때 각각 렌더링 되는 html tag에 고유한 "key"를 줘야한다. 안할 경우 아래같은 에러가 발생하기 때문이다. 왜 key를 map함수의 두 번째 인자로 받을 수 있는 index값이 아닌 배열 요소가 고유한 경우, 그 요소 이름을 사용하며 굳이 unique 한 문자열인 값을 줘야할까??? .map() 사용 예시 function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => {number} ); return ( {listItems} ); } const numbers = [1, 2, 3, 4, 5];.. 더보기
[React] 정복하기: 2번째 노트 React란? 리액트는 페이스북 엔지니어들이 개발한 자바스크립트 라이브러리다. Why React? Fast: 빠른 반응 속도 Modular: 컴포넌트로 쪼개면 유지보수면에서 훨씬 용이하다 Scalable Flexible JSX란? JSX는 JavaScript를 확장한 문법이다. 예 const element = Hello, world!; 자바스크립트 element변수에 선언된 HTML 태그처럼 보이는 Hello, world!는 문자열도 HTML도 아닌, JSX element다. 모양은 HTML과 같지만, .html파일이 아닌, .js파일에서 볼 수 있다. 리액트는 JSX를 사용해 분리되었던 HTML의 마크업과 JavaScript의 로직을 "component"란 유닛에 통합하여 한 번에 사용할 수 있다. 사.. 더보기
[React] 리액트란 무엇인가? "React makes it painless to create ineractive UIs." (from reactjs.org) 각 컴포넌트의 상태에 변화를 주어 웹/앱의 원하는 부분에만 변화를 줄 수 있게 도와준다. 결론은 "동적인" 웹 앱을 보다 간편하게 만들 수 있또록 도와주는 프론트엔드 라이브러리다. 더보기
[React] State keywords to know: react component props state 1. props vs. state차이 --> props는 불변하는 값을 담고, state는 컴포넌트 내부에서 변할 수 있는 값들을! 2. this.setState() 사용법과 사용하는 이유 --> 원본은 유지돼야한다. render랑 관련..! 3. 이벤트 처리 방법 4. 이벤트 처리 시 bind메소드를 사용하는 이유 (class constructor안에) --> this를 명확히 하기 위해 더보기