[React] State 끌어올리기 - 리액트 자습서6
2022. 11. 18. 20:52
프로그래밍/React
게임 완성하기 이제 틱택토 게임을 위한 기본 구성 요소를 가지고 있음 완전한 게임을 위해 게임판의 “X”와 “O”를 번갈아 표시할 필요가 있으며 승자를 결정하는 방법이 필요 State 끌어올리기 현재 게임의 state를 각각의 Square 컴포넌트에서 유지하고 있음 승자를 확인하기 위해 9개 사각형의 값을 한 곳에 유지할 것임 Board가 각 Square에 Square의 state를 요청해야 한다고 생각할 수도 있음 그리고 React에서 이런 접근이 가능하기는 하지만 이 방식은 코드를 이해하기 어렵게 만들고 버그에 취약하며 리팩토링이 어렵기 때문에 추천하지 않음 각 Square가 아닌 부모 Board 컴포넌트에 게임의 상태를 저장하는 것이 가장 좋은 방법임 각 Square에 숫자를 넘겨주었을 때와 같이 ..
[React] props와 state 확인하기 - 리액트 자습서5
2022. 11. 17. 20:03
프로그래밍/React
개발자 도구 Chrome과 Firefox의 React Devtools 확장 프로그램을 사용하면 브라우저 개발자 도구에서 React 컴포넌트 트리를 검사할 수 있음 React DevTools를 통해 React 컴포넌트의 props와 state도 확인할 수 있음 React DevTools를 설치한 후에 페이지의 모든 엘리먼트에 오른쪽 클릭을 하고 “요소 검사”를 클릭하여 개발자 도구를 열면 탭의 오른쪽 끝에 React 탭(“⚛️ Components”와 “⚛️ Profiler”)을 확인하실 수 있음 컴포넌트 트리를 검사하고 싶다면 “⚛️ Components”를 사용하기 참고 자료 : https://ko.reactjs.org/tutorial/tutorial.html#overview 자습서: React 시작하기 ..
[React] 사용자와 상호작용하는 컴포넌트 만들기 - 리액트 자습서4
2022. 11. 16. 20:54
프로그래밍/React
사용자와 상호작용하는 컴포넌트 만들기 Square 컴포넌트를 클릭하면 “X”가 체크되도록 만들어보자 먼저 Square 컴포넌트의 render() 함수에서 반환하는 버튼 태그를 아래와 같이 변경하기 class Square extends React.Component { render() { return ( {this.props.value} ); } } Square를 클릭하면 ‘click’이 브라우저 개발자 도구의 콘솔에 출력되는 걸 확인할 수 있음 주의 타이핑 횟수를 줄이고 this의 혼란스러운 동작을 피하기 위해 아래부터는 이벤트 핸들러에 화살표 함수를 사용할 것임 class Square extends React.Component { render() { return ( console.log('click')}..
[React] 리액트 조건문
2022. 11. 8. 20:43
프로그래밍/React
JSX 안의 삼항 연산자 조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드 이 형식에 맞춰 쓰면 됨 function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : null } ) } JSX 내에서 if/else 대신 쓸 수 있음 삼항연산자는 그냥 if와는 다르게 JSX 안에서도 실행가능하며 조건을 간단히 주고 싶을 때 사용 간단한 조건문 더보기 (문법) 자바스크립트에선 &&연산자라는게 있음 "왼쪽 오른쪽 둘다 true면 전체를 true로 바꿔주세요~" 라고 쓰고싶을 때 씀 true && false; true && true; 맨 위의 코드는 그 자리에 false가 남고 밑의 코드는 true가 남음 근데 자바스크립트는 && 기호로 비교할 때 true와..
[React] Props를 통해 데이터 전달하기 - 리액트 자습서3
2022. 10. 27. 20:03
프로그래밍/React
Props를 통해 데이터 전달하기 본격적으로 시작하기 위해 Board 컴포넌트에서 Square 컴포넌트로 데이터를 전달해 보자 Square에 value prop을 전달하기 위해 Board의 renderSquare 함수 코드를 수정하기 class Board extends React.Component { renderSquare(i) { return ; } } 값을 표시하기 위해 Square의 render 함수에서 {/* TODO */}를 {this.props.value}로 수정 class Square extends React.Component { render() { return ( {this.props.value} ); } } 변경 전에는 변경 후에는 렌더링 된 결과에서 각 사각형에 숫자가 표시됨 지금까지의..
[React] 초기 코드 살펴보기 - 리액트 자습서2
2022. 10. 26. 20:13
프로그래밍/React
초기 코드 살펴보기 초기 코드 확인 ✓ html ✓ css body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; } ol, ul { padding-left: 30px; } .board-row:after { clear: both; content: ""; display: table; } .status { margin-bottom: 10px; } .square { background: #fff; border: 1px solid #999; float: left; font-size: 24px; font-weight: bold; line-height: 34px; height: 34px; margin-right: -1px; margin-top: ..
[React] React란? - 리액트 자습서1
2022. 10. 25. 20:24
프로그래밍/React
React란? React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리 “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움 React는 몇 가지 종류의 컴포넌트를 가지지만 우리는 React.Component의 하위 클래스를 사용할 것임 class ShoppingList extends React.Component { render() { return ( Shopping List for {this.props.name} Instagram WhatsApp Oculus ); } } // 사용 예제: XML과 유사한 재밌는 태그를 사용할 것임 우리는 컴포넌트를 사용하여 React에게 화면에 표현하고 싶은 것이 무엇인지 알려줌 데이터..
[React] 합성 (Composition) vs 상속 (Inheritance)
2022. 10. 20. 20:48
프로그래밍/React
합성 (Composition) vs 상속 (Inheritance) React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋음 이번 문서에서는 React를 처음 접한 개발자들이 종종 상속으로 인해 부딪히는 몇 가지 문제들과 합성을 통해 이러한 문제를 해결하는 방법을 살펴볼 것임 컴포넌트에서 다른 컴포넌트를 담기 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있음 범용적인 ‘박스’ 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있음 이러한 컴포넌트에서는 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋음 function FancyBorder(..