본문 바로가기

WEB44

[React] state란? (props와 비교) props는 사용자가 컴포넌트를 사용하는 입장에서 중요하고 state는 props의 값에 따라서 내부에 구현에 필요한 데이터들이다. components의 기본적인 동작을 바꾸고 싶을 때 사용자에게 제공하는 것이 태그에서는 속성에 해당하는 props였다. 사용자에게 중요! 사용자에게는 알 필요도, 알아서는 안되는 컴포넌트에서 내부적으로 사용되는 것들을 state라고 한다. 그래서 리액트와 같은 시스템이 component를 만들고 component가 좋은 부품이 되기 위해서는 component를 사용하는 외부의 props와 props에 따라서 component를 구현하는 내부의 state라는 정보가 철저하게 분리되어있어야 한다. 컴포넌트를 구현할 때 좀 더 복합적으로, 다양한 일들을 하는 컴포넌트들을 만들 .. 2021. 10. 2.
[React] 컴포넌트 파일 분리 컴포넌트가 많아지면 또 이 컴포넌트들을 분리해줄 필요가 있다. 그리고 App.js에 파일에 있어서 다른 파일에서 이 파일 안의 컴포넌트들을 가져다가 쓰기 어렵다. 각각 컴포넌트 별로 파일로 쪼개 볼 것이다. 우선 src 디렉터리에 components 라는 디렉터리를 만들 것이다. 이 디렉터리 안에 각각의 컴포넌트 별로 파일을 만들어 줄 것이다. create-react-app이 기본적으로 index.js를 보면 App이라는 컴포넌트를 같은 디렉터리에 있는 App.js라는 파일에서 import해서 쓰고 있는 것이다. components 디렉터리에 TOC.js 파일을 만들고 TOC 컴포넌트를 복붙했다 (여기서 각 에디터에 따라서 컴포넌트를 클래스가 사용되고 있는데 이것을 로딩하는 코드가 없다고 하면서 빨간줄이.. 2021. 10. 1.
[React] Props 이전시간에 리액트의 컴포넌트를 만들어보았다. 이제 우리는 태그를(컴포넌트)를 다른 웹페이지나 패키지, 소프트웨어로 만들어서 다른 사람이 우리가 정의한 태그를 자신의 애플리케이션에 사용할 수 있다. 여기서 아쉬운 점! 정의한 태그는 언제나 똑같은 결과를 보여준다. 우리가 알고있는 태그들 중에 예를 들어 link 태그는 a라는 것을 통해서 이것이 태그다 라는 것을 알려준다. 동시에 이 링크가 어떤 주소와 연결되는지 표현해줄 필요가 있다. 그러기 위해서는 attribute라는 것을 통해서 각각의 링크주소를 표현하고 있다. 이렇게 태그의 이름, 속성이라는 차이점을 통해서 재사용성이 굉장히 높은 부품을 만들 수 있다. 어떻게?? https://ko.reactjs.org/docs/getting-started.htm.. 2021. 10. 1.
[React] 컴포넌트 만들기 (기초탄탄) #생활코딩 리액트가 없다면, 이것을 리액트로 바꾼다면?? public이라는 디렉터리는 create-react-app 에서 npm run start를 했을 떄 파일을 찾는 다큐먼트 루트이다. 비교하기 위해서 public 디렉터리에 일단 리액트를 쓰지 않을 test.html 파일을 만들어본다. semantic 태그 시맨틱 태그는 react와는 상관없는 html5의 스펙이다. 웹페이지는 대부분 헤더, 네비게이션, 본문 등의 영역이 있는데 이 부분을 의미론적으로 정의할 때 쓰는 것이 semantic 태그이다. 기능상의 변화는 없지만 태그를 보고 본문이구나 제목부분이구나~ 알수 있다. 만약 코드가 매~~우 길다고 했을 때 한 눈에 코드를 보기 어렵다. header 태그 4줄을 아래처럼 한 줄로 볼 수 있다면 엄청.. 2021. 9. 28.

티스토리툴바