RTL 테스팅 라이브러리는 Behavior Driven Test(행위 주도 테스트) 방법론 (Implementation Driven Test(구현 주도 테스트)의 단점을 보완하기 위한 방법론)이 대두 되면서 주목받기 시작한 테스팅 라이브러리 어떻게 작동 되는지 대해서 초점을 두어 어떠한 태그와 어떠한 클래스가 사용되었는지 테스트를 하였던 것을 Behavior Driven Test에서는 어떤 이벤트를 발생시켰을 때, 그에 따라 화면에 변화가 어떻게 일어나는지를 테스트 한다. https://www.daleseo.com/react-testing-library/ React Testing Library 사용법 Engineering Blog by Dale Seo www.daleseo.com

useState 이전 게시글로 대체 useEffect 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정 위와 같은 코드를 작성하게 되면, 기존에 명시된 info에 관련 정보를 출력 마운트만 실행하고자 할 때, 두 번째 파라미터는 비어있는 배열 useEffect(()=>{console.log("마운트!")},[]); 특정 값이 업데이트될 때만 실행 useEffect(()=>{console.log(name);},[name]); useReducer useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 Hook 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수 새로운 상태를 만들 때, 불..

Ref render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양 Ref 생성 React.createRef()를 통해 생성되고 ref 어트리뷰트를 통해 React 엘리먼트에 부착됩니다. 보통, 컴포넌트의 인스턴스가 생성될 때 Ref를 프로퍼티로서 추가하고, 그럼으로서 컴포넌트의 인스턴스의 어느 곳에서도 Ref 접근 가능 위와 같이 선언? 후에 사용된 함수내에서 this.box.scrollTop나 this.inputName.focus의 값에 변화를 줄 수 있다.

라이프사이클 메서드의 종류는 총 아홉 가지 마운트, 업데이트, 언마운트 카테고리로 나눌 수 있다. 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것 업데이트 아래의 네 가지 경우에 발생 props가 바뀔때 state가 바뀔때 부모 컴포넌트가 리렌더링될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 언마운트 마운트의 반대, 컴포넌트를 DOM에서 제거 라이프사이클 메서드 render() 함수 컴포넌트 모양새를 정의하며, 유일한 필수 메서드 this.props와 this.state 접근 가능, 리액트 요소를 반환 요소의 경우는 같은 태그나 따로 선언한 컴포넌트, null값이나 false값 반환 constructor 메서드 생성자 메서드, 초기 state를 정할 수 있다. getDerive..

input 요소를 이용해서 console 및 alert 해보려 한다. 우선 함수의 형태의 값을 전달을 위한 메서드 생성 class EventPractice extends Component { state = { message: '' } constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClick.bind(this); } handleChange(e) { this.setState({ message: e.target.value }); console.log("changing : "+this.state.message); } handleClick() { conso..

map 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수 함수는 원본 자료형을 변형시키지 않아서 새로운 변수에 담아서 사용 function App() { let [글제목, 글제목변경] = useState(['논산', '강남', '동대문']); return ( { 글제목.map((a)=>{ return ( {a} ) ) } ) } map() 함수 기본 사용 const number = [1, 2, 4, 6, 20, 100]; const result = number.map((newNumber) => newNumber * newNumber); console.log(result); map() 함수를 통해서 각 값 * 값을 return하여 console..

Component 리액트의 문법으로 HTML을 한 단어로 줄여서 쓸 수 있는 방법 // Hello.js import React from 'react'; function Hello() { return Hello World! } export default Hello; // App.css .hello { matgin-top: 20px; padding: 20px; background: #eee; } // App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 위의 코드는 App.js에서 함수를 길게 적을 게 아니라 src 폴더 안에 Hello.js를 만들어서 exp..

State 컴포넌트 내에서 바뀔 수 있는 값을 의미 props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값, props를 바꾸려면 부모 컴포넌트에서 바꾸어야 함 2021.10.15 - [웹/React] - [React] Component & props 두 가지의 state가 있는데, 함수형 컴포넌트에서 usestate와 클래스형 컴포넌트 state destructuring var [a,b] = [10, 100] array, object에 있던 자료를 변수에 쉽게 담고 싶을 때 사용 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 destructuring(구조 분해) 사용법 usestate 동적인 값을 상태, 변수 대신 쓰는 데이터 저장공간..