หา Bug ง่ายขึ้น ด้วยการ Validate props [React]

ทุกครั้งที่เราเขียน component ขึ้นมา สิ่งท้ายสุดที่(ควร)จะทำ ก็คือ props validation หรือการเช็ค type ของ props ที่จะรับเข้ามาใน component นั่นเอง

แล้วทำไมต้องมานั่งปวดหัวกับ props กับ type อะไรนี่ด้วยอ่ะ??
เอาเป็นว่าทุกครั้งที่เขียนโค้ดครับ ให้คำนึงถึง Bug อยู่เสมอ ถ้าเราเขียนมันไว้ เวลาเกิดบั้กขึ้นมาก็จะหาได้ง่าย นอกจากนี้ยังช่วยให้คนที่เขียนต่อจากเรารู้ด้วยว่าจะต้องส่งอะไรเข้าไปใน component

React เตือนทุกครั้งที่ใส่ props ผิดประเภทของ Component (ที่เรากำหนดไว้)

เขียนครั้งแรก

การเขียน validate props เราจะเขียนอยู่นอก Component โดยแบ่งเป็นสองส่วน ก็คือ propTypes ที่เอาไว้ระบุชนิดของ props รวมถึงระบุว่าจำเป็นต้องใส่ไหม และ defaultProps ที่เอาไว้เป็นค่าเริ่มต้นในกรณีที่ props นั้นๆไม่ถูกส่งมาใน Component

ซึ่งถ้าหาก props ที่รับมาเป็นมากกว่าตัวแปรทั่วไป เช่น array หรือ object ที่ซ้อนกันหลายๆชั้น ก็จะต้องมี propTypes ที่แปลกขึ้นตามเนื้อผ้า

จะเห็นว่า prop ที่เป็น array ก็ต้องระบุ type ข้างในเช่นกัน ถ้าหากเราไม่ระบุว่า props นั้นจำเป็นต้องใส่มา เราก็จะต้องเขียน defaultProps ให้กับ prop นั้นด้วย

ในเคสที่ระบุว่า props นั้นๆจำเป็นต้องใส่มาด้วย ให้ใช้ isRequired หลังจากนั้นก็ไม่ต้องกำหนด defaultProps แล้ว แบบนี้เลย

ตัวอย่าง propsTypes แบบแปลกๆ

ถ้าหากต้องการที่จะส่ง object นี้เข้าไปเป็น props

{
  url: {
    query: {
      data: 'My queries'
    }
  }
}

การระบุ propTypes ก็จะบังคับเขียนไปเป็นตามนี้

กลายเป็นงานหยาบเลยทีเดียว เพราะ object มันซ้อนกันหลายชั้นมากกก แต่ก็มีวิธีที่ง่ายจนแทบจะเรียกได้ว่าลักไก่ ก็คือเขียน props แบบนี้ครับ

เป็นการบอกว่า urlObject ของเราจะเป็น Object ที่ซ้อนอะไรก็ได้ ถ้าเป็นแบบนี้ คือผ่าน! แล้วหละคร้าบบ

Multiple element

สำหรับ propTypes แบบนี้ก็คือจะบังคับให้ใส่ element เป็นชุดๆ เช่น

<SomeComponent>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</SomeComponent>

Single or Multiple element

ในท่านี้ เราจะสามารถใส่ props ที่เป็น element ตัวเดียวหรือจะมาเป็นชุดก็ได้

<SomeComponent>
  <div>
    <p>1</p>
  <div>
</SomeComponent>

ถ้าหากโปรเจคของเราก้อนโตขึ้นเรื่อยๆ มันจะช่วยให้ชีวิตเราง่ายขึ้นเยอะครับ นอกจากเหนือจากตัวอย่างนี้ก็ยังมี types อีกมากมายที่ React เค้าทำมาให้ จะใช้อันไหนก็แล้วแต่กรณีไป ติดตามตัวอย่างได้ในลิ้งค์นี้กันได้เล้ยยย https://github.com/facebook/prop-types