NYchicken's blog ;

조건부 렌더링이란? 쉽게 말하자만 원하는 조건에 따라 다른 결과를 렌더링 하는것이다. 이를 위해 JS 연산자 if 나 조건부 연산자를 사용해 현재 상태에 맞는 UI 를 출력한다. 이렇게 두가지의 컴포넌트가 있다고 가정했을 때 function HelloApple(){ return Hello, Apple! } function HelloBanana(){ return Hello, Banana! } 현재 과일에 맞는 컴포넌트를 띄우는 Fruit 컴포넌트이다. fucntion Fruit (props){ const currentFruit = props.fruitName; if(currentFruit === 'Apple') return else return } 엘리먼트 변수 사용하기 변수를 사용해 출력의 다른 부분은 ..

이벤트란? 웹 페이지에서 마우스를 클릭하거나 특정 요소에 포커스가 이동 되었거나 키를 입력했을 때 등 '어떠한 사건을 발생 시키는 것' 을 의미한다. 1. 마우스 이벤트 - click - dbclick(double click) - mouseover, mouseoust - mousedown, mouseup 2. 키 이벤트 - keydown, keyup - keypress 3. 폼 이벤트 - focus - submit 등등 그 이상 참고는 https://ko.javascript.info/introduction-browser-events 여길 하시라! 여기 문서 너무 깔끔하고 보기 좋아서 강추... 🤓 이벤트 핸들러란? 사용자가 이벤트를 발생시켰을 때, 이에 대응하는 이벤트를 발생시키기 위한 함수이다. 이러한..

Component 란? 컴포넌트는 html 을 반환하는 함수이다. UI 를 기능별로 여러 조각으로 나눠 사용할 수 있게한다. 앱의 일부를 렌더링 하는 재사용 가능한 모듈이라고 할 수 있다. Component 선언하기 컴포넌트는 항상 대문자로 시작해야한다. function Hello(){ return hello, this is React! } React 는 파스칼-케이스(pascal-case) 변수 이름을 사용한다. 정규 Html 태그가 아니라는 것을 명시하기 위해서다. 1. 간단한 컴포넌트 예시입니다. function App() { return ( This is title. Hello! This is content area. ); } 2. 같은 JS 파일에서 컴포넌트를 작성했을 시 function App..