로니의 개발 이야기

1. state 사용 - 2 아래와 같은 코드가 있을때, 여기서 를 주목해보자. 이 코드가 나타내는 바는 미리 만들어 놓은 TOC 컴포넌트를 반환해주게 된다. 이 부분은 web 상에서 봤을 때, 글 목록을 보여주게 된다. 그렇다면 여기서 TOC 안에 있는 데이터로 App의 내부 state를 TOC에 주입해주는 것을 통해서 자동으로 데이터를 바꿔주고 싶다면 어떻게 하면될까? 쉽게 말해서 새로운 글 목록이 추가될 때마다, TOC를 열어서 수정하지 않고 바로 수정하는 것이다. 이를 위한 첫번째 단계로 contents라는 state를 만들어주었다. 데이터가 여러개이기 때문에 [] (대괄호)를 통해서 배열을 만들었다. 그리고 3가지 객체의 배열을 만들었다. 각각 id 값, title 값, desc 값을 갖는다. ..

1. props 초기화 어떤 Component가 실행될 때, render보다 먼저 실행이 되면서 그 Component를 초기화 시켜주고 싶은 코드는 constructor안에다가 코드를 작성한다. 2. state 사용 state를 초기화 하는 과정이다. 예를 들어, return에 담겨져 있는 내용들을 state화 시키는 과정을 진행해보면, 먼저, Head를 state화 하는 것이기 때문에 다음과 같이 title, sub값을 지정하고, head state를 만들었다. 이제 이 state를 적용시켜서 반환하는 작업을 진행하면 된다. {} (중괄호) 안에 다음과 같이 호출을 해주면 정상적으로 작동되는 것을 볼 수 있을 것이다.

1. React의 props와 state의 차이 props는 사용자가 component를 사용하는 입장에서 중요한 것 state는 props의 값에 따라, 내부에 구현하기 위해 필요한 데이터 Props와 Component는 철저하게 분리되어 있어야 한다. 양쪽의 편의성을 각자 도모하여 개발을 진행하여야 한다.

1. React props : stands for properties React는 component를 만들어서 개발을 진행한다. 예를 들어 props라는 title을 가지고 그것을 정의하는 'Example_props'라는 component를 만들었다고 해보자. 아래의 코드는 class 방식으로 component를 생성한 것을 보여준다. 아래의 코드는 function 방식으로 component를 생성한 것을 보여준다. 이 component를 사용하기 위해는 아래와 같이 'App' component 안에 component를 넣어주면 된다. 그런데 여기서 Example_props라는 component를 이용해서 props에 대한 정의뿐만 아니라 다양하게 사용해보고 싶다면 어떻게 하면 될까? 바로 이때, 사용하..

1. React component 만들기 : 정리 정돈의 도구 예를 들어, 아래와 같은 HTML 코드가 있을 때 이를 React 코딩을 통해서 component로 어떻게 만들어 볼 수 있을까? 먼저 src 디렉토리 안에 있는 App.js를 실행시키고, 그 코드를 수정해주면 된다. App.js 안에서 아래의 형식에 맞게 코드를 작성하면 된다. 여기서 눈여겨봐야 할 것이 있는데, 최상위 태그이다. React에서 컴포턴트를 만들 때, 그 컴포넌트는 반드시 하나의 최상위 태그로 구성되어야 한다. 위의 형식을 바탕으로 HTML 코드를 컴포넌트로 바꾸어 보면, 아래와 같이 코드를 작성할 수 있다. 이렇게 작성한 컴포넌트를 App class 안에 넣어주면 된다. 실행 결과 아래와 같이 정상적으로 잘 만들어진 것을 볼..

1. React build 프로덕션 모드의 애플리케이션을 만들 때, build 할 때는 터미널 창에 아래와 같이 입력을 하면 되는데, 그 과정을 진행하게 되면, 아래와 같이 build 디렉토리가 생기게 된다. 여기서 index.html을 들어가보면 공백 없이 코드가 나열되어있는 것을 볼 수 있는데, 이는 공백과 같이 불필요하게 용량을 차지하는 것들을 제거해주었기 때문이다.

1. React에서 JS 코딩하는 법 public 폴더에 index.html을 들어가서 하단부에 내려가 보면, div 태그에 id가 'root'로 되어있는 부분이 있는데, 이 부분 안쪽에 react를 통해서 만든 component들을 넣기로 약속되어 있다. 그렇다면, 이 component들은 어떤 폴더를 수정해서 만들어볼 수 있을까? 가장 먼저 진입하게 되는 파일은 index.js 파일이다. index.js 파일에 들어가보면 아래와 같은 코드를 볼 수 있는데, 여기에서 'root'가 앞서 언급했던 index.html 파일의 'root' id 부분에 해당되는 것이다. 따라서 이 부분의 이름을 수정하고 싶다면 index.html과 index.js 파일의 두 부분을 동일하게 수정해주어야 한다. 그리고 이라고 ..

1. React? React는 페이스북에서 만든 UI 라이브러리이다. 2. React의 component 사용을 통해 얻을 수 있는 이점 가독성을 높일 수 있다. 재사용성이 높아 진다. 유지보수가 편리해진다.