본문 바로가기
반응형

react10

[javascript] JSX ? html 태그로 표현되어있는 문법을 createElement 로 변환해준다. const vdom = 헤더 첫번째 두번째 위에 있는 코드가 아래와 같이 변환이 된다. "use strict"; const vdom = /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("h1", null, "\uD5E4\uB354"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", { style: "color:red" }, "\uCCAB\uBC88\uC9F8"), /*#__PURE__*/React.createElement("li", { s.. 2023. 1. 13.
[React] Warning: Each child in a list should have a unique "key" prop. React 에서 Key 가 필요한 이유 Map 사용시 고유한 Key 가 필요하다. React 는 상태를 메모리에 저장하고 있다가 변경된 부분만 렌더링 한다. Key 값이 없으면 모든 데이터를 비교해야 하지만 Key 가 있으면 Key만 비교하면 된다. {props.users.map((user) => ( {user.username} ({user.age} years old) ))} Map 에서 index 를 Key로 하면 안되는 이유 0번의 index 가 삭제되면 React 가 변경을 감지하여 리렌더링 되고 0번 부터 다시 매핑한다. 1번 인덱스가 0번으로 매핑이 된다. 결론적으로 인덱스가 추가되거나 삭제되면 값이 바뀌기 때문에 index 를 key 로 사용하는것은 안좋다. 2022. 8. 12.
[React] React.useState() 값과 함수를 반환한다. 함수는 값을 변화시킨후 컴포넌트를 리렌더링한다 여러개의 state 를 정의할 수도 있고 object로 관리할수도 있다. const [enteredTitle, setEnteredTitle] = useState(''); const [enteredAmount, setEnteredAmount] = useState(0); const [enteredDate, setEnteredDate] = useState(); const [userInput, setUserInput] = useState({ enteredTitle: '', enteredAmount: 0, enteredDate: '' }) 주의 할 점은 update 시 object에 있는 일부 키만 업데이트 한다면 다른 키들이 사라진다. 아래와.. 2022. 8. 12.
2018년을 마무리 하면서. 이제 곧 2018년이 저물고 2019년이 시작된다.올 한해동안 내가 무엇을 했는지 한번 돌이켜 보고 정리를 하려고 한다. 막연하게 정리하기는 힘드니 생각나는 키워드대로 한번 적어본다. 1. Google Cloud Study Jam 2018/05/15 - [Development/Tech&Seminar] - Google Cloud Study Jams 후기2018/10/08 - [Development/Tech&Seminar] - Google Cloud Hackathon 간단한 후기2018/10/26 - [Development/Tech&Seminar] - Google Cloud Summit 2018 후기 나름 새롭게 뭔가를 해보기 위해 다짐하면서 시작했던 Google Study Jam. 막연하게 AWS 도 써봤.. 2018. 12. 30.
[React] edX - Introduction to ReactJS Module2 내용정리 edX사이트에서 Introduction to ReactJS 강의를 들으면서 정리한 내용입니다. 2018/04/18 - [Development/React] - edX - Introduction to ReactJS Module1 내용정리 Class Components - Class Component Class Component 는 Functional Component 와 다르게 React Component 가 라이프사이클 메소드(Life Cycle method) 와 상태(state) 를 가질수 있도록 해준다. Class Component는 this.state, this.props 를 가지고 있다. 1 2 3 4 5 class Welcome extends React.Component{ render(){ ret.. 2018. 5. 30.
[나는 리뷰어다] <Vue.js 첫걸음> 으로 Vue.js 의 첫걸음을 시작하자. 요즘 보면 JavaScript 라이브러리와 프레임워크들을 정말 많이 사용하고 있고 그 사용 폭도 점점 넓어지고 있다. 종류도 많지만 각각의 특성도 다양해서 정말 따라가기 힘들다. 워낙 넓다보니 뭐부터 시작해야 할지도 잘 모르겠다. 최근 동기들과 React를 조금씩 공부하고 있는데 React 와 Vue의 차이를 좀 알아볼겸 이번 리뷰 도서로 선택을 했다. 보통 모르는 언어를 처음 접할때에는 가장 중요한게 이론이다. 아무생각없이 Copy&Paste만 해가지고는 처음에는 좀 빠를지 몰라도 나중에는 막히게 된다. 이 책도 읽다보면 빠르게 진도를 나갈수 있는 책은 아니었다. 특히 나같이 Javascript 에 대해서 많은 지식을 가지고 있지 않은 사람들에게는 정말 천천히 끈기를 가지고 읽어야 하는 책이다. 책 내.. 2018. 5. 24.
edX - Introduction to ReactJS Module1 내용정리 edX사이트에서 Introduction to ReactJS 강의를 들으면서 내용을 정리해봤다. What is ReactJS?ReactJS 는 상태에 따라서 View 레이어를 만들어 주는 라이브러리이다.React Compnents는 Virtual DOM 을 생성한다. ReactCompnent의 상태가 변경되면 새로운 Virtual DOM을 생성하고 차이점을 분석한다. 그리고 효과적인 방법으로 HTML DOM 에 반영한다. Rendering Elements- React ElementsReact Elements 는 DOM 노드에 표현되는 Object 이다. JSX를 사용해서 syntax를 작성한다. React Elements와 React Components는 다르다. React Elements를 DOM 에 표.. 2018. 4. 18.
map() 메소드 사용 React 에서 사용하는 map() 메소드는 파라미터를 전달하여 새로운 배열을 생성한다. 최근에 본 자바의 Stream 에서 map 의 기능하고 비슷해보인다. 아니 아마도 java가 functional 프로그래밍을 지원하려고 하면서 비슷하게 구현해놓은것 같다. 아래와 같은 contractData 라는 state를 저장해 놓는다. 123456789101112 constructor(props){ super(props); this.state={ contactData:[ {name:"Abet", phone:"010-0000-0001"}, {name:"Betty", phone:"010-0000-0002"}, {name:"Charlie", phone:"010-0000-0003"}, {name:"David", pho.. 2017. 1. 16.
React 에서 props 사용 props 는 컴포넌트에서 사용할 데이터중 변하지 않는 데이터를 다룰때 사용한다. Parent 컴포넌트에서 child 컴포넌트로 데이터를 전달할 때 props를 사용한다. 컴포넌트의 render() 메소드 내부에 {this.props.propsName} 형태로 넣고 컴포넌트에서 사용할 때에는 안에 propsName='value' 형태로 값을 설정 한다. - render() 메소드 내부 12345678910111213class App extends React.Component { render(){ let text = "Hello HI"; return ( ); }}Colored by Color Scriptercs - 컴포넌트 1234ReactDOM.render( , rootElement);cs - Defau.. 2017. 1. 9.
React.. 끄적끄적. - React는 UI를 만들기 위한 라이브러리이다. framework 가 아니다. - React는 Virtual DOM 을 사용한다. 그래서 Virtual DOM의 전후 상태를 비교해서 변경된 부분만 새로 반영한다. - 현재 facebook 에서 라이브러리 관리를 하고 있어서 한동안 없어질 일은 없다. https://facebook.github.io/react/ 2017. 1. 9.
728x90
반응형

티스토리툴바