본문 바로가기

전체 글

 (76)
[React] key와 children 속성 이해하기 Key 속성 설정하기  모든 리액트 컴포넌트는 key와 ref라는 속성을 포함하고 있다.  그리고 children이라는 속성을 선택적으로 포함한다.  리액트 프레임워크는 와 같은 리액트 컴포넌트뿐만 아니라 사용자 컴포넌트에도 key 속성을 제공한다.  Key 속성은 같은 이름의 컴포넌트가 여러 개일 때 이들을 구분하려고 리액트 프레임워크가 만든 속성이다.export default function App() { const texts = [hello, world] return {texts}}   해당 경고 메시지는 각각의 요소 2개에 중복되지 않는 키 값을 설정해주면 해결할 수 있다. export default function App() { const texts = [hello, world] retu..
[React] 컴포넌트 이해하기 컴포넌트란?  컴포넌트는 스몰토크(Smalltalk)에서 유래한 매우 오래된 용어이며 화면 UI를 처리하는 클래스를 의미한다.  리액트는 컴포넌트(component) 기반의 구조를 띄는 특징을 갖고있다.  모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러개의 컴포넌트의 조합으로 구성될 수 있다.    16.8버전 이후 리액트 훅(react hooks)이라는 새로운 매커니즘을 고안해 객체지향 언어에서 의미하는 클래스가 아닌 단순한 함수 형태로도 컴포넌트를 구현할 수 있게 되었다. (함수 컴포넌트, 리액트 훅의 사용을 권장한다)  리액트 컴포넌트와 사용자 컴포넌트  리액트 컴포넌트라는 용어는 리액트가 제공하는 리액트 컴포넌트와 사용자가 구현하는 사용자 컴포넌트라는 2가지 의미를 포함한다..

티스토리툴바