React9 React - Side Effect / Pure Function Side Effect(부수효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 한다. 리액트에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나, 이벤트를 활용해 DOM을 직접 조작할때 Side Effect가 발생했다고 한다. 전역 변수 foo를 bar라는 함수가 수정하는 예제 let foo = 'hello'; function bar() { foo = 'world'; } bar(); // bar는 Side Effect를 발생시킵니다! Pure Function(순수 함수) 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 순수 함수라고 한다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치거나, 함수가 입력으로 전달된 값을 .. 2023. 4. 3. React - State & Props Props 외부로부터 전달 받은 값 How to use props 1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다. 2. props를 이용하여 정의된 값과 속성을 전달한다. 3. 전달받은 props를 렌더링 한다. function Parent() { return ( I'm the parent ); } function Child(props) { console.log("props : ", props); // {text : "I'm the eldest child"} return ( {props.text} ); } export default Parent; State 내부에서 변화하는 값 useState 사용법 React에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공한.. 2023. 3. 28. React - 기초 리엑트? 리엑트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다. 리엑트의 3가지 특징 선언형(Declarative) 리엑트는 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. 컴포넌트 기반(Component-Based) 리엑트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다. 유지보수 및 유닛테스트도 편하다는 장점이 있다. 범용성(Learn Once, Write Anywhere) 리엑트는 JavaScript 프로젝트 어디에든 유연하게 적용.. 2023. 3. 22. 이전 1 2 다음
