enquiring enquiring

Conditional Rendering1. Conditional Rendering은 어떤 조건에 따라 렌더링이 달라지는 것을 의미한다.해석하면 조건부 렌더링이 된다. 여기에서 조건은 조건문을 의미한다. 조건문을 넣어, true/false로 나오는 결과에 따라 렌더링을 다르게 하는 것을 말한다. 2. 자바스크립트의 Truthy/Falsy자바스크립트에는 True/False가 아니지만, True/False로 여겨지는 값들이 존재한다. 이 값을 각각 Truthy/Falsy라고 한다. 실제 조건문에서 혼동하지 않도록 아래의 대표적인 Truthy와 Fasly 예시를 기억해두도록 한다.Truthytrue{ } (empty object)[ ] (empty array)42 (number, not zero)-> 42는 하..

Event Handler1. Event Handler는 이벤트를 처리하는 함수이다.Event는 '사건'을 의미한다. 예를 들어 클릭 이벤트는 사용자가 버튼을 클릭하는 사건이 된다. Event Handler(이벤트 핸들러)는 어떤 이벤트에 발생했을 때 그 이벤트를 처리하는 함수를 말한다. 이벤트가 발생하는 것을 계속 듣고 있다는 의미에서 'Event Listener'라고도 한다. 2. 함수 컴포넌트의 Event Handler 사용 예시function Toggle(props) { const [isToggleOn, setIsToggleOn] = useState(true); // 방법 1. 함수 안에 함수로 정의 function handleClick() { setIsToggleOn((isToggleO..

Lifecycle1. 컴포넌트 생성 - Mounting컴포넌트가 생성되는 과정을 'Mounting'이라 한다.컴포넌트가 생성되면, constructor(생성자) 함수가 실행되고, 생성자에서는 state를 정의한다. 컴포넌트가 렌더링되면, componentDidMount() 함수가 호출된다. 2. 컴포넌트 업데이트 - Updating컴포넌트가 업데이트되는 과정을 'Updating'이라 한다.컴포넌트 props 변경 / setState() 함수 호출에 의해 state 변경 / forceUpdate() 함수에 의한 강제 업데이트=> 컴포넌트 재렌더링렌더링 이후 componentDidUpdate() 함수가 호출된다. 3. 컴포넌트 삭제 - Unmounting리액트 컴포넌트가 DOM에서 제거되어 화면에서 사라지는..

State1. State는 React 컴포넌트의 변경 가능한 데이터를 의미한다.State는 React 컴포넌트의 데이터이다. 일반 함수는 retrun 값을 메모리에 저장하지 않는다. 예를 들어function add(a, b) { let sum = a + b; return sum;}이 함수에서 add(1, 2)를 실행하고 결과 3이 나오면, 변수 sum은 즉시 메모리에서 사라진다. 다시 add 함수를 호출하면, sum의 값이 이전에 무엇이었는지 기억하지 못한다. 반면, State를 가진 React 컴포넌트는, 컴포넌트 함수가 실행되고 화면을 다 그린 후에도 state 값을 메모리에 저장한 후 다음 렌더링 때 사용한다. 즉 함수가 종료되어도 값이 사라지지 않고 다음 실행 때까지 살아남는 것이다. 2. S..

React Component1. 컴포넌트 렌더링(Component Rendering) 예시 코드function Welcome(props) { return Hello, {props.name};}const element = ;const root = ReactDOM.createRoot(document.getElementById('root'));root.render(element);먼저 Welcome이라는 함수 컴포넌트를 선언하였다. 다음으로, Welcome name="ella"라는 값을 가진 element를 파라미터로 하여, Root Dom Node의 render 함수를 호출한다. 이후 React가 Welcome 컴포넌트에 name="ella"라는 props를 넣어 호출하고, 그 결과로 React Eleme..

React Element1. React Element는 화면을 구성하는 가장 작은 블록이다.먼저 블록은 JavaScript 객체를 의미한다.예를 들어,Hello이러한 코드를 작성하면, React는 이 코드를const element = { type: 'div', props: { className: 'greeting', children: 'Hello' }};이와 같은 '블록(Block)'으로 인식한다. 다시 말해, React Element는 JavaScript 객체이다.코드를 살펴보면, React는 type은 div, 내용은 Hello라고 인식한 뒤 브라우저 화면에 렌더링을 한다. React에서 element의 '렌더링(Rendering)'이란 React의 렌더링 속도를 높이기 위한 가상 돔..