If4 React - 조건부 랜더링 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서의 조건부 랜더링을 알아보도록 하겠습니다. 기존의 제 프로젝트나, 작성에서는 Nunjucks 를 이용하여, If 문등을 사용하여 작성했습니다. React 역시도 기본적으로는 If 나 조건부 연산자 등을 이용해서 작성을 하게 됩니다. 이를 자세하게 살펴보도록 하겠습니다. ============ HTML 삽입 미리보기할 수 없는 소스 ============ HTML 삽입 미리보기할 수 없는 소스 class Test extends React.Component { render() { const isLoggedIn = this.props.isLoggedIn if (isLoggedIn) { return Hynn Tistory Blog } else { r.. 2023. 2. 28. JavaScript - 삼항연산자에 대하여 안녕하세요. Hynn 입니다. 이번 포스팅과, 다음 포스팅에서는 이전에 동기/비동기 설명에서 잠시 다루었던, 삼항연산자와 setTimeout, setInterval 에 대해서 설명드리도록 하겠습니다. 간단한 내용일수도 있지만, 복잡한 내용이 될 수도 있는 두개의 항목인지라, 이번 포스팅에서는 삼항 연산자부터 다루도록 하겠습니다. ============ 1. 삼항연산자란? 2. If 문과 삼항연산자 작성의 차이 ============ 1. 삼항연산자란? 삼항연산자, 조건부 연산자라고도 불리우며, 이 삼항연산자의 기본적인 사용틀은 "If" 문의 그것과 거의 동일합니다. 하지만 If문과 삼항연산자는 상황에 따라서 분명히 쓰임이 좋은 방향이 분명히 별도로 존재하기 때문에, 개별적으로 나뉘어 있다고 할 수 있습니.. 2022. 11. 14. JavaScript 실습예제 - Lotto JavaScript 코드 효율화 안녕하세요. Hynn 입니다. 이전 포스팅에서 코드의 효율성을 위해 JavaScript 를 효율적으로 작성하기 위한 예제를 게시한 바 있습니다. 이번 포스팅에서는 효율적으로 작성한 JavaScript 코드를 작성하는 방식에 대해서 해설이 있다면, 저도 기억하기가 좋고, 다른 분들께서도 좋은 참고자료가 되었으면 합니다. 그럼 시작해보겠습니다. ============== 1. JavaScript 작성 2. 해설본 ============== 1. JavaScript 작성 const btn = document.querySelector('#submit') const LottoDisplay = document.querySelector('#lottonum') const LottoBox = document.queryS.. 2022. 11. 10. JavaScript 실습예제 - Lotto 번호 생생 웹 페이지 만들기 안녕하세요. 이전 포스팅에서 작성한 여러개의 기능을 사용하여, 이제 Lotto 번호 생성기를 만드는 예제를 작성해보겠습니다. 각 페이지 단계별로 설명을 첨부하였으니, 참고하시면 도움이 될 것이라고 생각합니다. 그리고, 코드를 조금 더 간추린 버전을 설정하여, 페이지 하단에 기재했으니, 참고하시면 좋을 거 같습니다. 이에 대해서는 별도의 설명을 하지 않겠습니다. ========================== 1. Lotto 번호 만들기 - HTML 2. Lotto 번호 만들기 - CSS 3. Lotto 번호 만들기 - JavaScript 4. 코드 정리하기 ========================== 1. Lotto 번호 만들기 - HTML 먼저 HTML은 간촐하게 작성합니다. 먼저 영역을 설정하기 .. 2022. 11. 10. 이전 1 다음
