로니의 개발 이야기

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에서 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 사용을 통해 얻을 수 있는 이점 가독성을 높일 수 있다. 재사용성이 높아 진다. 유지보수가 편리해진다.