![]()
* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link) 버튼에 이벤트를 추가하는 예제를 통해 이벤트 처리하는 방법에 대해 알아보자. 우선 아래와 같이 Hello.js의 내용에 태그를 추가한다. export default function Hello() { return Hello Show name Show age ; } 방법 1. 함수 showName() 함수를 추가하여, 버튼의 onClick 옵션으로 넣어준다. 여기서 주의할 점은 중괄호 내부에 showName이 아닌 showName()을 작성하게 되면 showName() 함수가 반환하는 값이 들어가게 되어, undefined가 반환되므로 주의하자. export default function Hello() { function show..
![]()
* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link) 1. 인라인 스타일 사용하기 태그에 스타일 옵션을 이용하여 스타일을 적용하는 방법이다. 단, 스타일 옵션의 값은 객체가 들어가야 하므로, 중괄호가 2중으로 작성되어야 한다. (코딩앙마님 강의와는 다르게 보기 편하도록 컴포넌트를 임의로 하나 추가했다.) 📁 CssStyleTest.js export default function CssStyleTest() { return StyleTest inline style ; } 여기서 주의할 점이 몇 가지 있다. 스타일의 옵션 이름을 background-color와 같이 dash(-)를 사용하지 말고, backgroundColor와 같이 Camel 케이스로 작성해줘야 한다. value 부분..
![]()
* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link) ✏️ Hello 컴포넌트 작성하기 src 하위에 component 디렉터리를 생성하여 내부에 Hello.js 파일을 만든다. 내용은 아래와 같다. 주석 처리 한 부분처럼 함수 표현식으로 작성하여 해당 변수를 export하도록 사용해도 되고, 혹은 한 번에 export하도록 아래 부분처럼 작성해도 된다. // const Hello = function() { // Hello; // } // export default Hello; export default function Hello() { Hello; } 🤓 만든 Hello 컴포넌트 사용하기 App.js에서 컴포넌트를 포함한다. import './App.css'; import He..
![]()
* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link) 🧐 컴포넌트란 리엑트로 만든 페이지는 컴포넌트들로 구성된다. 페이지들 단위로 작성되는 것이 아니라, 각 부분을 컴포넌트로 만들어서 조립해서 사용한다. 비슷한 부분은 코드를 재사용할 수 있고 유지보수가 쉬워진다는 장점이 있다. 아래의 예시를 보자. 더 자세히 쪼개자면 뉴스 컴포넌트 안에 단일 뉴스 컴포넌트, 탭 컴포넌트 ... 등으로 또 나눌 수 있다. 이런 컴포넌트는 다른 페이지에서도 재사용이 가능하다. 💻 코드로 돌아가기 import logo from './logo.svg'; import './App.css'; function App() { return ( yerang park. Learn React ); } export d..
