정리 및 복습
JSX
jsx 는 자바스크립트의 확장된 문법
html과 비슷한데, property는 HTML과 같은 방식으로 길게 적어주면 됨
html 내부에 js 문법을 활용해 {}안에 담기
브라우저가 jsx를 이해할 수 있게 반환해주어야 함
state
전체 브라우저의 새로고침 없이도 부분적으로 필요한 부분만을 재렌더링 해줌.
state는 여러개 쓰는 것보다 효율적으로 설정하여 사용하도록 하자
- setState
데이터의 변경하고 싶을때,
원본 state를 변경하지 말고 deep copy를 통해 그 이후 변경하기
component
component는 React에서 HTML을 반환하는 '함수'
유지보수(하나의 컴포넌트를 잘 만들어두면 반복적으로 사용이 가능)
class component -> render()
fuction component -> return()
props ()
부모의 컴포넌트에서 자식 컴포넌트에 데이터들을 전달해주는 방법
컴포넌트에서 사용할 데이터 중에 변동되지 않는 데이터를 다룰 때 사용됨.
React props와 component
property = value 의 형식으로 전달하는데
이 형식 어디서 봤더라? js object에서 !
그래서 컴포넌트의 첫번째의 인자로 object 방식으로 받아온다.
컴포넌트에서 변하지 않는 데이터가 필요할때,
render() 메소드 내부 안에 {this.props.propsName} 형식을 넣은 다음
컴포넌트를 사ㅏ용할 때 <> 괄호 안에 propsName = "value"를 넣어 값을 설정.
벨로퍼트님의 dev.log - 2016년에 작성된
map
map 반복문으로 돌린 함수는 key={}를 필요로 함
